:root {
  /* Colors */
  --pink: #db21cc;
  --dark-pink: #801889;

  --blue: #130a7d;
  --dark-blue: #00011f;

  /* Font weight */
  --font-extralight: 200;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;

  /* Border radius */
  --default-radius: 50%;
  --border-radius-small: 10px;
  --border-radius-medium: 20px;
  --border-radius-big: 30px;

  /* Margin */
  --centering: 0 auto;

  /* Width / Height - margin on the sides */
  --large-screen-width: calc(100% - 400px);
  --smaller-screen-width: calc(100% - 100px);
  --mobile-screen-width: calc(100% - 60px);
  --scalable-width: 100%;
  --scalable-height: 100%;
}

html,
body {
  height: var(--scalable-height); /* html and body takes the full height */
}

* {
  margin: 0; /* removes default margin for all elements */
  padding: 0; /* removes default padding for alll elements */
  box-sizing: border-box; /* ensures padding and borders are included in the elements width/height */
}

body {
  background-color: var(--dark-blue); /* back up colour */
  background-image: url(../assets/images/background.jpg);
  background-repeat: no-repeat; /* doesnt repeat background */
  background-attachment: fixed; /* stays fixed and doesnt scroll */
  background-size: cover; /* covers the whole screen no matter the resolution */
  font-family: "alexandria", Helvetica, sans-serif, arial;
  font-weight: var(--font-extralight);
  color: white;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

input,
button {
  font-family: inherit; /* buttons and forms will have the same font as the body */
}

/* Error message */
.error-message {
  align-items: center;
  margin: 30px auto;
  justify-content: center;
  text-align: center;
  grid-column: 1 / -1;
}

.error-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 500px;
  margin: 0 30px;
  text-align: center;
}

/* Loading indicator */
.loading-indicator {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--scalable-width);
  height: var(--scalable-height);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.spinner {
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: var(--default-radius);
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em white,
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
      1.8em -1.8em 0 0em white, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em white,
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em white,
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em white,
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em white,
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em white,
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em white;
  }
}

/* navigation menu */
.hamburger-icon,
#menu-checkbox,
.logo-mobile,
.icon-mobile {
  display: none;
}

.navigation-wrapper {
  position: relative;
  background-color: transparent;
  z-index: 5; /* makes sure its on top of the hero picture and dark overlay */
  display: flex; /* creates a flex container */
  justify-content: space-between; /* spaces items on opposites sides */
  align-items: center; /* centers items within the header */
  max-width: 1600px;
  width: var(--large-screen-width); /* ensures 200px padding on both sides */
  margin: var(--centering);
  padding: 10px 0 0 0;
  position: relative;
}

.navigation-wrapper {
  align-items: center;
}

.logo img {
  height: auto;
  width: 80px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 80px;
}

.nav-links a {
  color: white;
  text-decoration: none; /* remove underline from links */
  font-weight: var(--font-regular);
}

.nav-links a:active {
  color: var(--pink);
}

.current {
  color: var(--pink) !important; /* prioritises this colour */
  font-weight: var(--font-semibold) !important;
}

/* right side of header */
.search-icons-section {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.header-icon {
  font-size: 20px;
  padding: 10px;
  border-radius: var(--default-radius);
  color: white;
}

.fa-user {
  padding: 10px 13px;
}

.header-icon:hover {
  background-color: var(--dark-pink);
  border-color: var(--dark-pink);
}

.header-icon:active {
  background-color: var(--pink);
  border-color: var(--pink);
}

.cart-count-badge {
  background-color: var(--pink);
  color: white;
  font-weight: var(--font-light);
  border-radius: var(--default-radius);
  padding: 2px 7px;
  font-size: 14px;
  position: absolute;
  top: 10px;
  right: -8px;
}

.icon-mobile-section .cart-popup {
  display: none;
}

.cart-popup {
  font-weight: var(--font-light);
  position: fixed;
  top: 60px;
  transform: translateX(-55%); /* Centering adjustment */
  text-align: right;
  background-color: var(--pink);
  border-radius: var(--border-radius-big);
  padding: 10px;
  z-index: 1000;
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

.fade-out {
  opacity: 0;
}

/* button style */
.button {
  background-color: var(--blue);
  color: white;
  font-size: 1em;
  font-weight: var(--font-regular);
  border: none;
  padding: 12px 30px;
  border-radius: var(--border-radius-big);
  text-decoration: none;
  text-align: center;
  width: fit-content;
  cursor: pointer; /* cursor changes to a pointer */
}

.accent {
  background-color: var(--dark-pink);
}

.button-width {
  width: var(--scalable-width);
}

/* footer style */
footer {
  display: flex;
  padding: 100px 0 50px 0;
  max-width: 1600px;
  width: var(--large-screen-width); /* ensures 200px padding on both sides */
  margin: var(--centering);
  justify-content: space-between;
  align-items: center;
}

.social-media_icon {
  color: var(--dark-blue);
  font-size: 20px;
  background-color: white;
  padding: 7px;
  border-radius: var(--default-radius);
  margin-left: 5px;
}

.social-media_icon:hover {
  background-color: var(--dark-pink);
}

.social-media_icon:active {
  background-color: var(--pink);
}

.fa-instagram {
  padding: 7px 9px;
}

.copyright {
  font-size: 0.9em;
}

/* hover states */
@media (hover: hover) {
  .nav-links a:hover {
    color: var(--dark-pink);
  }

  .button:hover {
    background: linear-gradient(45deg, var(--dark-pink) 0%, var(--blue) 100%);
  }
}

/* shared colors */
.header-icon {
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border: 0.3px solid rgba(255, 255, 255, 0.3);
}