* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.3s all !important;
  box-shadow: none !important;
}
:root {
  --primary-color: #f2f2f2;
  --card-color: #fff;
  --text-primary: #1f2933;
  --text-secondary: #6b7280;
  --btn-color: #111827;
}
.primaryBgColor {
  background-color: var(--primary-color);
}
.cardBgColor {
  background-color: var(--card-color);
}

.textPrimaryBgColor {
  background-color: var(--text-primary);
}
.textPrimaryColor {
  color: var(--text-primary);
}
.textPrimaryColorHover {
  color: var(--text-primary);
}
.textPrimaryColorHover:hover {
  background-color: var(--text-primary);
  color: white;
}
.btnPrimary {
  color: var(--btn-color);
}
.btnPrimaryColor {
  background-color: var(--btn-color);
  color: white;
}
.btnPrimaryColor:hover {
  background-color: var(--btn-color);
  color: white;
  opacity: 0.9;
}
.textSecondaryBgColor {
  background-color: var(--text-secondary);
}
.textSecondaryColor {
  color: var(--text-secondary);
}
.textSecondaryColorHover {
  background-color: var(--text-secondary) !important;
  color: white !important;
}
.textSecondaryColorHover:hover {
  background-color: var(--text-secondary) !important;
}
/* ------------------------------- */
.btnBorderPrimary {
  border: 1px solid var(--btn-color) !important;
  color: var(--btn-color);
}
.btnBorderPrimary:hover {
  background-color: var(--btn-color) !important;
  color: var(--primary-color);
}
.btnBorderSecondary {
  border: 1px solid var(--text-secondary) !important;
  color: var(--text-secondary);
}
.btnBorderSecondary:hover {
  background-color: var(--text-secondary) !important;
  color: var(--primary-color);
}
.btn:active{
  background-color:var(--primary-color);
}
/* --------------------------------------------------------------------- */
body {
  background-color: var(--primary-color);
  perspective: 1000px;
}
.form-select:focus {
  border-color: transparent !important;
}
.space {
  height: 90px;
}
.fa-arrow-right-from-bracket {
  transform: rotate(180deg);
}
.fa-arrow-right-from-bracket:hover {
  color: rgb(184, 15, 15);
}
.productsQuantity {
  top: -10px;
  right: -5px;
  width: 20px;
  height: 20px;
  font-size: 14px;
}
.cartOfProducts {
  min-width: 320px;
  transform: translateX(-40%);
  border: 1px solid #ccc;
  top: 40px;
  background-color: var(--card-color);
}
.sectionPrice {
  height: 120px;
}
.sectionPrice .row div,
.sectionPrice .purchase {
  transition: 0.3s all linear !important;
}
.productCard,
.sectionPrice .row div {
  text-align: center;
  background-color: var(--card-color);
  padding: 10px;
  transform: translateY(0);
}
.productCard:hover,
.sectionPrice:hover .row div {
  transform: translateY(-10px);
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4) !important;
}
.sectionPrice:hover .purchase {
  visibility: visible !important;
  margin-top: 8px !important;
}
input:not(input[type="search"]):not(input[type="submit"]):not(
    input[type="checkbox"]
  ) {
  background-color: var(--primary-color) !important;
  color: var(--text-primary) !important;
}

.lastNameInput {
  left: 10px !important;
}
.form-control:focus {
  border: 1px solid var(--text-primary);
}
#registerPasswordShow svg,
#registerConfirmPasswordShow svg,
#loginPasswordShow svg {
  transform: scale(1.2);
  cursor: pointer;
  display: block;
}
#registerPassword:placeholder-shown + #registerPasswordShow svg {
  display: none;
}
#registerConfirmPassword:placeholder-shown + #registerConfirmPasswordShow svg {
  display: none;
}
#loginPassword:placeholder-shown + #loginPasswordShow svg {
  display: none;
}
.imageContainer {
  transform-style: preserve-3d;
  position: relative;
  transform: rotateY(0deg);
  transition: 0.7s linear !important;
}
.productCard:hover .imageContainer {
  transform: rotateY(180deg);
}
.frontImage {
  position: absolute;
  z-index: 1;
  right: 0;
  backface-visibility: hidden;
}
.backImage {
  right: 0;
  position: absolute;
  transform: rotateY(180deg);
}
.productInCart {
  background-color: var(--card-color);
  border: 1px solid #ccc;
}

.fa-plus,
.fa-minus {
  cursor: pointer;
}