@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Poppins;
}

.modals-container {

  position: fixed;
  z-index: 100;
  height: 100vh;
  width: 100%;
  background: rgba(173, 173, 173, 0.7);

  .modal.oculto {
    display: none;
  }

  .modal {
    position: relative;
    top: 50%;
    left: 50%;
    translate: -50% -50%;


    background: white;
    width: clamp(320px, 90vw, 520px);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;

    i {
      color: var(--secondary-color);
      font-size: 3rem;
    }

    p {
      color: hsl(from var(--paragraph-color) h s calc(l + 20));
    }

    .modal-btns-container {
      display: flex;
      gap: 1rem;
    }

    .btn__modal {
      padding: 0.5rem 1rem;
      border-radius: 6px;
    }

    .btn__modal--do {
      background: var(--secondary-color);
      color: white;
    }

    .btn__modal--dont {
      background: rgb(231, 231, 231);
    }

  }

  .modal-success {

    i {
      color: var(--primary-color);
    }

    .btn__modal--do {
      background: var(--primary-color);
      color: white;
    }
  }
}

button {
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0px 4px 8px 0px rgba(53, 53, 53, 0.2);
}

.page {
  padding: 4rem 1rem;
}

.section-container {
  padding: 1rem 0rem 0rem 0rem;
  width: 100%;

  .section__title {
    background: linear-gradient(90deg, var(--primary-color), hsl(from var(--primary-color)h s calc(l - 10)), hsl(from var(--primary-color)h s calc(l - 15)));
    background-clip: text;
    color: transparent;
    font-size: 2.2rem;
  }

  select,
  input[type="number"],
  input[type="text"],
  input[type="date"],
  input[type="time"],
  input[type="color"],
  input[type="file"],
  input[type="tel"],
  input[type="email"],
  textarea {
    width: 100%;
    padding: 0.5rem;
    outline: none;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
    background: white;
  }

  input[type="color"] {
    width: 100%;
    height: 50px;
  }
}

.section-content {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 2.5rem;
}

.section__subtitle {
  font-size: 1.2rem;
  max-width: 600px;
  text-wrap: pretty;
}

.first-container {
  padding-top: 3rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;

  .btns-plans-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.8rem;
    flex-wrap: wrap;
  }

  .btn__plan {
    width: auto;
    padding: 0.5rem 0.8rem;
    background-color: white;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
  }

  .btn__plan--full {
    grid-column: 1/-1;
  }

  .btn__plan:hover {
    background: hsl(from var(--primary-color)h s calc(l - 25));
    color: white;
  }

  .btn__plan.active {
    background: var(--primary-color);
    color: white;
    font-weight: bold;
  }

  text-align: center;

  p {
    text-align: left;
    text-wrap: pretty;
  }

  .section__subtitle {
    text-align: center;
    color: var(--primary-color);
    font-weight: bold;
  }

  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

}

.invitation-type-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}



.type-container {
  padding: 0;
  width: 100%;
  display: none;

  .event-info-step,
  .event-visual-identity-step,
  .contents-and-texts-step,
  .media-content-step,
  .identification-step {
    gap: 1.5rem;
  }

  label {
    font-weight: bold;
  }

  label span {
    font-weight: normal;
    color: var(--secondary-color);
  }

  .btns-types-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    .btn__type {
      background: white;
      width: 100%;
      border: 1px solid var(--primary-color);
      border-radius: 6px;
      padding: 0.5rem 1rem;
    }

    .btn__type.active {
      background: var(--primary-color);
      font-weight: bold;
      color: white;
    }

    .btn__type:hover {
      background: hsl(from var(--primary-color) h s calc(l - 15));
      color: white;
    }
  }

  .form-item .error-msg {
    font-size: 0.8rem;
    color: orangered;
  }

  .form-item-moments-amount {
    display: flex;
    gap: 0.5rem;
    width: 100%;

    .form-item-radio {
      width: 100%;

      input[type="radio"] {
        display: none;
      }
    }

    .btn__moment,
    .btn__type {
      background: white;
      width: 100%;
      flex: 1;
      border: 1px solid var(--primary-color);
      border-radius: 6px;
      padding: 0.5rem 1rem;
    }

    .btn__moment.active {
      background: var(--primary-color);
      font-weight: bold;
      color: white;
    }

    .btn__moment:hover {
      background: hsl(from var(--primary-color) h s calc(l - 15));
      color: white;
    }

  }

  .event-place-container,
  .moment-container {
    display: none;
    flex-direction: column;
    gap: 1.5rem;
  }

  .form-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
  }

  .form-item p {
    font-size: 0.85rem;
    color: rgb(71, 71, 71);
  }

  .form-item-moments-amount {
    justify-content: start;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }

  .btns-colors-palette-container {
    display: flex;
    gap: 1rem;
    width: 100%;

    .btn__color__palette {
      width: 100%;
      padding: 0.5rem 1rem;
      background: white;
      border-radius: 6px;
      border: 1px solid var(--primary-color);
    }

    .btn__color__palette.active {
      background: var(--primary-color);
      color: white;
      font-weight: bold;
    }

    .btn__color__palette:hover {
      background: hsl(from var(--primary-color) h s calc(l - 15));
      color: white;
    }
  }

  #colorContainer1,
  #colorContainer2,
  #colorReservedContainer1,
  #colorReservedContainer2 {
    display: none;
  }

  .color-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: white;
    padding: 0.5rem;
    border-radius: 6px;

    .label__color {
      display: inline-block;
      margin-bottom: 0.5rem;
    }
  }

  .color-palette-container {
    display: none;
    gap: 0.5rem;

    .box {
      border-radius: 6px;
      background-color: lightgray;
      flex: 1;
      height: 45px;
    }

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

    .btn__change__color:hover {
      background: hsl(from var(--primary-color)h s calc(l - 15));
    }
  }

  .btns-container {
    width: 100%;
    display: flex;
    gap: 1rem;
    padding: 1rem 0;

    .btn__back,
    .btn__next {
      border-radius: 5px;
      width: 100%;
      padding: 0.5rem 1rem;
    }

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

    .btn__back {
      background: lightgrey;
    }

    .btn__back:hover,
    .btn__next:hover {
      color: white;
      background: hsl(from var(--primary-color)h s calc(l - 15));
    }

  }

  .reserved-colors-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }

  .contact-option {
    display: flex;
    gap: 0.5rem;
  }

  .tyc-check {
    display: flex;
    flex-direction: row;
    align-items: start;
  }

  .btn__file {
    background: white;
    width: 100%;
    flex: 1;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    padding: 0.5rem 1rem;
  }

  .btn__file.active {
    background: var(--primary-color);
    font-weight: bold;
    color: white;
  }

  .btn__file:hover {
    background: hsl(from var(--primary-color) h s calc(l - 15));
    color: white;
  }

  .email-domains-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;

    .btn__email__domain {
      background: white;
      border: 1px solid rgb(215, 215, 215);
      outline: none;
      color: var(--primary-color);
      padding: 0.5rem 1rem;
      border-radius: 6px;
    }
  }
}

.features-container {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  
  .oculto {
    display: none;
  }
  

}

.feature-card {
  background: linear-gradient(25deg, var(--primary-background-color) 80%, hsl(from var(--primary-color)h s calc(l + 40)));
  padding: 2rem 1.5rem;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  box-shadow: 0 0 12px rgba(35, 35, 35, 0.2);
  border: 1.5px solid var(--border-color);

  .pricing-card__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 1rem;
  }

  .pricing-card__features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .pricing-card__features ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  h4 {
    font-size: 1.2rem;
    color: var(--paragraph-color);
  }
}

.features-enterprise {
  background: linear-gradient(0deg, hsl(from var(--primary-color)h s calc(l - 40)), black);

  *,
  .pricing-card__header p,
  .pricing-card__features h4 {
    color: var(--tertiary-color);
  }

  .pricing-card__features h4 {
    font-size: 1.2rem;
  }

  .pricing-card__header h4 {
    color: var(--primary-color);
  }

  .pricing-card__header h3 {
    font-size: 2rem;
    background: linear-gradient(180deg, white, lightgrey, rgb(100, 100, 100));
    text-shadow: 0px 2px 8px rgba(255, 255, 255, 0.3);
    background-clip: text;
    color: transparent;
  }

  i {
    color: var(--primary-color);
  }
}

.type-enterprise-events {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  p {
    font-size: 0.9rem;
    color: white;
    padding: 6px 10px;
    background: var(--primary-color);
    border-radius: 6px;
  }

  i {
    color: white;
  }
}

.form-steps {
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-color: var(--tertiary-background-color);
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0px 2px 4px 1px rgba(35, 35, 35, 0.2);

  .form-steps-container {
    display: flex;
    width: 100%;
    justify-content: start;
    align-items: start;
    text-align: left;
  }

  .form-steps-counter-container {
    min-width: 60px;
    height: 60px;
    align-content: center;
    border-radius: 50%;
    background: white;
  }

  .step.oculto {
    display: none;
  }

  .step__label {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .step__subtitle {
    font-size: 0.7rem;
    color: rgb(75, 75, 75);
  }

}

.step__counter {
  --size: 60px;
  --progress: 20%;
  --track-color: #e5e5e5;
  --progress-color: #33c02e;

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    conic-gradient(var(--progress-color) var(--progress),
      var(--track-color) 0);
  display: grid;
  place-items: center;
  transition: background 0.3s ease;
}

.step__counter::before {
  content: "";
  width: calc(var(--size) - 10px);
  height: calc(var(--size) - 10px);
  background: white;
  border-radius: 50%;
  position: absolute;
}

.step__counter__label {
  position: relative;
  font-size: 0.75rem;
  z-index: 1;
}

.form-pro>div {
  width: 100%;
  display: none;
}

.form-pro>div.active {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pro-container {
  width: 100%;
  padding: 0;
}

#color-picker-container,
#color-picker-container2 {
  width: 100%;
  background: red;
}

.pickr .pcr-button {
  display: none !important;
}

.pcr-app {
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;

  .pcr-save,
  .pcr-type {
    border-radius: 4px !important;
    background: var(--primary-color) !important;
    color: white !important;
  }

  .pcr-save:hover,
  .pcr-type:hover {
    background: hsl(from var(--primary-color)h s calc(l - 15)) !important;
  }
}

@media (width >=1026px) {

  .page {
    padding-top: 1.5rem;
  }

  .first-container {
    padding-top: 15vh;
    text-align: left;
    gap: 1rem;

    .btn__plan--full {
      grid-column: auto;
    }
  }

  .section-container {
    padding: 5rem 3rem 2rem 3rem;

    .section__title {
      background: linear-gradient(90deg, var(--primary-color), hsl(from var(--secondary-color)h s calc(l - 10)), hsl(from var(--secondary-color)h s calc(l - 12)));
      background-clip: text;
      color: transparent;
    }
  }

  .features-container{

    .section__title{
      font-size: 1.8rem;
      background: linear-gradient(90deg, var(--primary-color), hsl(from var(--primary-color)h s calc(l - 10)), hsl(from var(--primary-color)h s calc(l - 15)));
      background-clip: text;
      color: transparent;
    }

  }

  .form-steps {
    max-width: 50%;
    grid-area: stepper;
  }

  .enterprise-container,
  .basic-container,
  .pro-container,
  .pro-plus {
    max-width: 50%;
    grid-area: form;
  }

  .section-content {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
      "stepper stepper"
      "form form";
    gap: 3rem;
    justify-items: center;
  }

  .invitation-type-container {
    .section__subtitle {
      text-align: left;
    }
  }

  .type-container {
    background: var(--tertiary-background-color);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0px 2px 4px 1px rgba(35, 35, 35, 0.2);
  }

}