/*!***********************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.8.1_webpack@5.93.0_webpack-cli@5.1.4_/node_modules/css-loader/dist/cjs.js!./src/styles/global.css ***!
  \***********************************************************************************************************************************************/
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --pink: #D658B3;
  --green: #45B442;
  --gray-700: #332B31;
  --gray-600: #4A4448;
  --gray-500: #756C71;
  --gray-400: #D3CFD2;
  --gray-300: #DFDCDF;
  --gray-200: #E9E7E9;
  --gray-100: #F4F1F2;
  --white: #FFFFFF;
  --gradient-base: linear-gradient(90deg, #2DAA6E 0%, #2DAAAA 33.33%, #856CCF 66.67%, #D658B3 100%);

  --ff-sans: "Oxygen", sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;
  --text-transform: uppercase; /* only for --font-subtitle-md and --font-subtitle-sm */

  --font-title-md: var(--fw-bold) 1.5rem/1.4 var(--ff-sans);
  --font-title-sm: var(--fw-bold) 1.125rem/1.4 var(--ff-sans);
  --font-subtitle-md: var(--fw-bold) 0.875rem/1.4 var(--ff-sans); /* and: --text-transform */
  --font-subtitle-sm: var(--fw-bold) 0.75rem/1.4 var(--ff-sans); /* and: --text-transform */
  --font-text-md: var(--fw-regular) 1rem/1.4 var(--ff-sans);
  --font-text-sm: var(--fw-regular) 0.875rem/1.4 var(--ff-sans);
  --font-text-xs: var(--fw-regular) 0.75rem/1.4 var(--ff-sans);

}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background-color: var(--gray-200);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul[role='list'] {
  list-style: none;
}

input:-webkit-autofill {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--gray-300) inset !important;
  -webkit-text-fill-color: var(--gray-700) !important;
}

input:-moz-autofill {
  background-color: transparent !important;
  box-shadow: 0 0 0px 1000px var(--gray-300) inset !important;
  -moz-text-fill-color: var(--gray-700) !important;
}

@media (max-width: 57em) {
  body {
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 0.5rem;
    }
    
    &::-webkit-scrollbar-track {
      background: var(--gray-300);
    }
    
    &::-webkit-scrollbar-thumb {
      background: var(--gray-500);
      border-radius: 0.1875rem;
    }
    
    &::-webkit-scrollbar-thumb:hover {
      background: var(--gray-700);
    }
  }
}
/*!*********************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.8.1_webpack@5.93.0_webpack-cli@5.1.4_/node_modules/css-loader/dist/cjs.js!./src/styles/main.css ***!
  \*********************************************************************************************************************************************/
.main {
  display: grid;
  grid-template-columns: 20rem 1fr;
  column-gap: 1.5rem;
  row-gap: 1rem;
  align-items: flex-start;

  max-width: 57rem;
  width: 100%;
}

@media (max-width: 57em) {
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 21.9375rem;
    min-width: 15.625rem;
    width: min(calc(100% - 1.5rem), 21.9375rem);

    margin: 0 0.75rem 0.9375rem;
    gap: 0.5rem;
  }
}
/*!***********************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.8.1_webpack@5.93.0_webpack-cli@5.1.4_/node_modules/css-loader/dist/cjs.js!./src/styles/header.css ***!
  \***********************************************************************************************************************************************/
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 4rem;
  margin-bottom: 4rem;

  max-width: 57rem;
  width: 100%;

  & img[src*='logo'] {
    width: 7.25rem;
    height: 3.5rem;
  }

  & .header-id {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font: var(--font-subtitle-md);
    text-transform: var(--text-transform);
    color: var(--gray-500);
  }

  & .header-id-form {
    border: 2px solid transparent;
    outline: 1px solid var(--gray-400);
    background: var(--gray-300);
    border-radius: 0.75rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    gap: 0.75rem;

    width: 25rem;
    height: 3.5rem;

    &:focus,
    &:focus-within {
      outline: 1.5px solid var(--pink);
      caret-color: var(--pink);
    }

    & input {
      all: unset;
      height: 1.375rem;
      width: 100%;
      font: var(--font-text-md);
      color: var(--gray-500);
    }

    & input:not(:placeholder-shown) {
      color: var(--gray-700);
    }

    & .header-id-input-button {
      all: unset;
      cursor: pointer;

      width: 2.5rem;
      height: 2.5rem;
      border-radius: 0.5rem;
      background: var(--gray-700);
      overflow: hidden;
      position: relative;
      flex: 0 0 auto;

      &:not(:disabled):hover,
      &:not(:disabled):focus {
        background: var(--gray-600);
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      & img {
        width: 1.25rem;
        height: 1.25rem;
        object-fit: fill;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }    
  }
}

@media (max-width: 57em) {
  .header {
    max-width: 21.9375rem;
    min-width: 15.625rem;
    width: min(calc(100% - 1.5rem), 21.9375rem);

    gap: 1rem;
    margin: 2rem 0.75rem 1.25rem 0.75rem;

    & img[src*='logo'] {
      width: 6.214375rem;
      height: 3rem;
    }

    & .header-id-form {
      width: 100%;
    }
  }
}
/*!*********************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.8.1_webpack@5.93.0_webpack-cli@5.1.4_/node_modules/css-loader/dist/cjs.js!./src/styles/user.css ***!
  \*********************************************************************************************************************************************/
.user {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 1rem;
  grid-column: 1/2;
  grid-row: 1/2;
  padding: 1rem;
  display: flex;
  gap: 1rem;

  width: 20rem;
  height: 5.625rem;

  & .user-avatar-external-container {
    position: relative;
    width: 56px;
    height: 56px;
    background: linear-gradient(white, white) padding-box, 
                conic-gradient(from -45deg,#D658B3 0%, #AF74DE 13%, #6B84DE 25%, #5DCAB7 38%, #45B442 50%, #5EC6B9 62%, #698DD9 73%, #B173DC 87%, #D658B3 100%) border-box;
    border: 2px solid transparent; /* using 2px instead of 1.5px because some browsers cant handle well subpixels */
    border-radius: 10px;

    & .user-avatar-internal-container {
      position: absolute;
      top: -2px;
      left: -2px;
      width: 56px;
      height: 56px;
    }

    & .user-avatar-img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      border: 4px solid transparent;
      object-fit: contain;
    }
  }

  & div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;

    & h1 {
      font: var(--font-title-sm);
      color: var(--gray-600);
    }

    & p {
      font: var(--font-text-xs);
      color: var(--gray-500);
    }
  }
}

@media (max-width: 57em) {
  .user {
    order: 1;
    width: 100%;
  }
}
/*!************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.8.1_webpack@5.93.0_webpack-cli@5.1.4_/node_modules/css-loader/dist/cjs.js!./src/styles/history.css ***!
  \************************************************************************************************************************************************/
.history {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 1rem;
  grid-column: 1/2;
  grid-row: 2/4;
  padding: 1.75rem 0.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;

  width: 20rem;
  height: 22.5rem;

  & .history-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-right: 1.25rem;
    gap: 1rem;

    & .history-header {
      display: flex;
      justify-content: space-between;

      & h2 {
        font: var(--font-subtitle-sm);
        text-transform: var(--text-transform);
        color: var(--gray-500);
      }

      & span {
        font: var(--font-text-xs);
        color: var(--gray-500);
      }
    }

    & .history-list {
      border-top: 1px solid var(--gray-200);
      padding-top: 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;

      & .history-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        & .history-list-item-data {
          & h2 {
            font: var(--font-subtitle-sm);
            text-transform: var(--text-transform);
            color: var(--gray-600);
          }

          & span {
            font: var(--font-text-xs);
            color: var(--gray-500);
          }
        }

        & .history-list-item-check {
          background: rgba(69, 180, 66, 0.12);
          border-radius: 50%;
          width: 2rem;
          height: 2rem;
          overflow: hidden;
          position: relative;
          flex: 0 0 auto;

          & img {
            width: 1.5rem;
            height: 1.5rem;
            object-fit: fill;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }  
}

.history-content::-webkit-scrollbar {
  width: 0.375rem;
}

.history-content::-webkit-scrollbar-track {
  background: var(--gray-100);
}

.history-content::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 0.1875rem;
}

.history-content::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

@-moz-document url-prefix() {
  .history-content {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300);
  }
}

@media (max-width: 57em) {
  .history {
    order: 4;
    width: 100%;
    padding: 1.5rem 0.5rem 1.25rem 1.25rem;
  }
}
/*!*********************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.8.1_webpack@5.93.0_webpack-cli@5.1.4_/node_modules/css-loader/dist/cjs.js!./src/styles/card.css ***!
  \*********************************************************************************************************************************************/
.card {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 1rem;
  grid-column: 2/3;
  grid-row: 1/3;

  width: 100%;
  height: 20.8125rem;

  padding: calc(2.25rem - 0.0625rem) calc(2rem - 0.0625rem) calc(2rem - 0.0625rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  & .card-header {
    display: flex;
    gap: 3.0625rem;

    & .card-header-text {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      height: 2.5625rem;
      margin-top: 0.25rem;

      & h2 {
        font: var(--font-subtitle-sm);
        text-transform: var(--text-transform);
        color: var(--gray-500);
      }
      
      & span {
        font: var(--font-text-sm);
        color: var(--gray-500);
      }
    }
    
    & .card-header-id-tag {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;

      width: 10.5rem;
      height: 2rem;

      background-color: var(--gray-300);
      border-radius: 1rem;
      padding: 0.5rem 0.75rem;

      font: var(--font-subtitle-md);
      text-transform: var(--text-transform);
      color: var(--gray-500);
      text-align: center;
    }
  }

  & .card-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    & .card-item {
      width: 5.5rem;
      height: 5.5rem;
      border-radius: 1.25rem;
      background-color: var(--gray-200);
      position: relative;

      & img[src*="pin-check"] {
        width: 4rem;
        height: 4rem;
        object-fit: fill;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      & img[src*="gift-solid"] {
        width: 2.5rem;
        height: 2.5rem;
        object-fit: fill;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.35;
      }
    }
  }
}

@media (max-width: 57em) {
  .card {
    order: 2;
    height: 100%;
    min-width: 19.5rem;
    padding: calc(1.5rem - 0.0625rem) calc(1.25rem - 0.125rem) calc(1.25rem - 0.0625rem) calc(1.25rem - 0.0625rem);
    gap: 1.25rem;


    & .card-header {
      gap: 1rem;

      & .card-header-text {
        height: 3.4375rem;
        margin-top: 0;

        & h2 {
          font: var(--font-subtitle-sm);
        }
      
        & span {
          font: var(--font-text-xs);
        }
      }

      & .card-header-id-tag {
        width: 9rem;
        height: 1.5rem;
        
        border-radius: 0.75rem;
        padding: 0.21875rem 0.5rem;

        font: var(--font-subtitle-sm);
      }
    }

    & .card-slots {
      gap: 0.5rem;

      & .card-item {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 0.785625rem;

        & img[src*="pin-check"] {
          width: 2.5rem;
          height: 2.5rem;
        }

        & img[src*="gift-solid"] {
          width: 1.5rem;
          height: 1.5rem;
        }
      }
    }
  }
}
/*!*************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.8.1_webpack@5.93.0_webpack-cli@5.1.4_/node_modules/css-loader/dist/cjs.js!./src/styles/progress.css ***!
  \*************************************************************************************************************************************************/
.progress {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 1rem;
  grid-column: 2/3;
  grid-row: 3/4;
  
  width: 100%;
  height: 7.3125rem;

  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  & .progress-gift {
    background-color: var(--gray-200);
    border-radius: 50%;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;

    & img {
      width: 4rem;
      height: 4rem;
      object-fit: fill;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  & .progress-data {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;

    & .progress-remaining {
      height: 2.125rem;

      & strong {
        font: var(--font-title-md);
        color: var(--gray-600);
      }
  
      & span {
        font: var(--font-text-md);
        color: var(--gray-500);
      }
    }

    & .progress-bar {
      display: flex;
      align-items: center;
      gap: 0.75rem;

      & div:first-child {
        position: relative;
        width: 100%;
      }

      & .progress-bar-total {
        background-color: var(--gray-300);
        border-radius: 1rem;
        height: 0.5rem;
      }

      & .progress-bar-progress {
        background: var(--gradient-base);
        border-radius: 1rem;
        height: 0.5rem;
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
      }

      & span {
        font: var(--font-text-xs);
        color: var(--gray-500);
        white-space: nowrap;
        flex: 0 0 auto;
      }
    }
  }
}

@media (max-width: 57em) {
  .progress {
    order: 3;
    height: 5.5rem;
    padding: 1rem 1.25rem;
    gap: 1.5rem;

    & .progress-gift {
      width: 3.5rem;
      height: 3.5rem;

      & img {
        width: 2.5rem;
        height: 2.5rem;
      }
    }

    & .progress-data {
      gap: 0.25rem;

      & .progress-remaining {
        height: 1.5625rem;

        & strong {
          font: var(--font-title-sm);
        }

        & span {
          font: var(--font-text-sm);
        }
      }
    }
  }
}
/*!**********************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.8.1_webpack@5.93.0_webpack-cli@5.1.4_/node_modules/css-loader/dist/cjs.js!./src/styles/modal.css ***!
  \**********************************************************************************************************************************************/
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);

  & .modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45%;
    padding: calc(2.25rem - 0.0625rem);
    background-color: var(--gray-200);
    border: 1px solid var(--gray-300);
    border-radius: 1rem;
    font: var(--font-title-sm);
    text-transform: var(--text-transform);
    color: var(--gray-600);
    display: flex;
    flex-direction: column;

    & .modal-close {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      font: var(--font-title-md);
      color: var(--gray-500);

      &:hover,
      &:focus {
        color: var(--gray-700);
        text-decoration: none;
        cursor: pointer;
      }
    } 
  }  
}

@media (max-width: 57em) {
  .modal {
    & .modal-content {
      min-width: 19.5rem;
    }
  }
}
/*!**********************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.8.1_webpack@5.93.0_webpack-cli@5.1.4_/node_modules/css-loader/dist/cjs.js!./src/styles/index.css ***!
  \**********************************************************************************************************************************************/