@use "../../../../../styles/abstracts/variables" as *;

.modal {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 2rem;

  overflow-y: auto;

  background: rgba(4, 6, 10, 0.82);
  backdrop-filter: blur(14px);

  animation: fadeIn .25s ease;

  &__card {
    position: relative;

    width: 100%;
    max-width: 540px;

    margin: auto;

    border-radius: 24px;

    overflow: hidden;

    background:
      linear-gradient(
        180deg,
        rgba(22,22,24,.98) 0%,
        rgba(15,15,18,1) 100%
      );

    border: 1px solid rgba(255,255,255,.06);

    box-shadow:
      0 35px 80px rgba(0,0,0,.55);

    animation: slideUp .35s ease;

    &::before{
      content:"";

      position:absolute;
      inset:0;

      background:
      radial-gradient(
        circle at top right,
        rgba(247,147,24,.08),
        transparent 45%
      );

      pointer-events:none;
    }
  }

  &__close{
    position:absolute;
    z-index: 888;
    top:1rem;
    right:1rem;

    width:40px;
    height:40px;

    border:none;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
      rgba(255,255,255,.05);

    color:rgba(255,255,255,.7);

    cursor:pointer;

    transition:.25s;

    z-index:20;

    svg{
      font-size:1.2rem;
    }

    &:hover{
      background:
      rgba(255,255,255,.09);

      color:#fff;
    }
  }

  &__header{
    position:relative;

    z-index:5;

    padding:
      2rem
      2rem
      1.5rem;

    border-bottom:
      1px solid
      rgba(255,255,255,.06);

    h2{
      color:$col-white;

      font-size:1.2rem;

      font-weight:600;

      margin-top:.9rem;
      margin-bottom:.8rem;
    }

    p{
      color:
      rgba(
        255,
        255,
        255,
        .68
      ) !important;

      font-size:.84rem !important;

      line-height:1.9;

      max-width:95%;
    }
  }
}

.badge{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:
    .45rem
    .9rem;

  border-radius:999px;

  background:
    rgba(
      247,
      147,
      24,
      .10
    );

  border:
    1px solid
    rgba(
      247,
      147,
      24,
      .15
    );

  color:#f79318;

  font-size:.68rem;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;
}

.form{

  position:relative;

  z-index:5;

  padding:2rem;

  display:flex;

  flex-direction:column;

  gap:1.4rem;
}

.formGrid{

  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:1rem;

  @media(max-width:768px){

    grid-template-columns:1fr;

  }

}

.formGroup{

  display:flex;

  flex-direction:column;

  label{

    color:
      rgba(
        255,
        255,
        255,
        .82
      );

    font-size:.82rem;

    font-weight:600;

    margin-bottom:.55rem;

  }

  input,
  select{

    width:100%;

    height:50px;

    border-radius:14px;

    border:
      1px solid
      rgba(
        255,
        255,
        255,
        .06
      );

    background:
      rgba(
        255,
        255,
        255,
        .025
      );

    padding:
      0
      1rem;

    color:$col-white;

    font-size:.86rem;

    transition:.25s;

    outline:none;

    &::placeholder{

      color:
      rgba(
        255,
        255,
        255,
        .35
      );

      font-size:.82rem;

    }

    &:focus{

      border-color:
      rgba(
        247,
        147,
        24,
        .30
      );

      box-shadow:
      0 0 0 4px
      rgba(
        247,
        147,
        24,
        .06
      );

    }

  }

  select{

    cursor:pointer;

    appearance:none;

  }

}

.helper{

  color:
    rgba(
      255,
      255,
      255,
      .52
    );

  font-size:.78rem;

  line-height:1.7;

  margin-top:-.2rem;

  margin-bottom:.9rem;

}

/* ==========================================
   PACKAGE SELECTOR
========================================== */

.packages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.package,
.packageActive {
  min-height: 48px;

  padding: 0.85rem 1.15rem;

  border-radius: 14px;

  border: 1px solid
    rgba(255, 255, 255, 0.06);

  background: rgba(255, 255, 255, 0.025);

  color: rgba(255, 255, 255, 0.75);

  font-size: 0.82rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.25s ease;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  user-select: none;

  &:hover {
    transform: translateY(-2px);

    border-color: rgba(
      247,
      147,
      24,
      0.22
    );

    background: rgba(
      247,
      147,
      24,
      0.05
    );

    color: #fff;
  }

  span {
    pointer-events: none;
  }
}

.packageActive {
  color: #111;

  border-color: transparent;

  background: linear-gradient(
    135deg,
    #f79318,
    #ffb454
  );

  box-shadow: 0 12px 28px
    rgba(
      247,
      147,
      24,
      0.28
    );

  &:hover {
    transform: translateY(-2px);

    background: linear-gradient(
      135deg,
      #f7a328,
      #ffbf63
    );

    color: #111;
  }
}

/* ==========================================
   FOOTER ACTIONS
========================================== */

.actions {
  display: grid;

  // grid-template-columns: 1fr 1fr;

  gap: 1rem;

  margin-top: 0.4rem;

  padding-top: 1.8rem;

  border-top: 1px solid
    rgba(
      255,
      255,
      255,
      0.06
    );

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
}

.cancelBtn,
.submitBtn {
  height: 50px;

  border-radius: 14px;

  font-size: 0.85rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.25s ease;

  display: flex;

  align-items: center;

  justify-content: center;
}

.cancelBtn {
  border: 1px solid
    rgba(
      255,
      255,
      255,
      0.06
    );

  background: rgba(
    255,
    255,
    255,
    0.035
  );

  color: #fff;

  &:hover {
    background: rgba(
      255,
      255,
      255,
      0.07
    );
  }
}

.submitBtn {
  border: none;

  color: #111;

  background: linear-gradient(
    135deg,
    #f79318,
    #ffb454
  );

  &:hover:not(:disabled) {
    transform: translateY(-2px);

    box-shadow: 0 18px 40px
      rgba(
        247,
        147,
        24,
        0.28
      );
  }

  &:disabled {
    opacity: 0.65;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
  }
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 900px) {
  .modal {
    padding: 1rem;

    &__card {
      max-width: 100%;

      border-radius: 20px;
    }

    &__header {
      padding: 1.5rem;

      h2 {
        font-size: 1.05rem;
      }

      p {
        max-width: 100%;
      }
    }
  }

  .form {
    padding: 1.5rem;
  }

  .packages {
    gap: 0.65rem;
  }

  .package,
  .packageActive {
    flex: 1 1 calc(50% - 0.65rem);
  }
}

@media (max-width: 600px) {
  .modal {
    padding: 0.75rem;
  }

  .form {
    padding: 1.25rem;
  }

  .package,
  .packageActive {
    flex: 1 1 100%;
  }

  .actions {
    gap: 0.75rem;
  }
}

/* ==========================================
   ANIMATIONS
========================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;

    transform: translateY(20px)
      scale(0.98);
  }

  to {
    opacity: 1;

    transform: translateY(0)
      scale(1);
  }
}

/* ==========================================
   SCROLLBAR
========================================== */

.modal::-webkit-scrollbar {
  width: 8px;
}

.modal::-webkit-scrollbar-track {
  background: transparent;
}

.modal::-webkit-scrollbar-thumb {
  background: rgba(
    255,
    255,
    255,
    0.12
  );

  border-radius: 999px;
}

.modal::-webkit-scrollbar-thumb:hover {
  background: rgba(
    255,
    255,
    255,
    0.2
  );
}