@use "../../../../styles/abstracts/mixins";
@use "../../../../styles/abstracts/variables";

/* ==========================================
   PAGE
========================================== */

.contactPage {
  @include mixins.pageBase;

  width: 100%;

  position: relative;
}

/* ==========================================
   INFO GRID
========================================== */

.contactPage__infoGrid {
  display: grid;
  margin-top: 2rem;

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

  gap: 1.25rem;

  margin-bottom: 1.5rem;

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

/* ==========================================
   INFO CARD
========================================== */

.infoCard {
  position: relative;

  overflow: hidden;

  padding: 1.5rem;

  border-radius: 24px;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.025) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );

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

  backdrop-filter: blur(18px);

  transition: all 0.25s ease;

  &::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
      radial-gradient(
        circle at top right,
        rgba(247, 147, 24, 0.06),
        transparent 40%
      );

    pointer-events: none;
  }

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

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

  h4 {
    margin-bottom: 0.5rem;

    color: #fff;

    font-size: 0.95rem;
    font-weight: 600;
  }

  p {
    color: rgba(
      255,
      255,
      255,
      0.72
    );

    font-size: 0.82rem;

    line-height: 1.8;
  }
}

.infoCard__icon {
  width: 56px;
  height: 56px;

  margin-bottom: 1rem;

  border-radius: 16px;

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

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

  color: #f79318;
}

/* ==========================================
   FORM CARD
========================================== */

.contactPage__card {
  position: relative;

  overflow: hidden;

  padding: 2rem;

  border-radius: 24px;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.025) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );

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

  backdrop-filter: blur(20px);

  &::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
      radial-gradient(
        circle at top right,
        rgba(247, 147, 24, 0.05),
        transparent 40%
      );

    pointer-events: none;
  }

  > * {
    position: relative;

    z-index: 2;
  }

  @media (max-width: 768px) {
    padding: 1.25rem;
  }
}

/* ==========================================
   SUCCESS CARD
========================================== */

.successCard {
  display: flex;

  align-items: flex-start;

  gap: 1rem;

  margin-bottom: 1.5rem;

  padding: 1.25rem;

  border-radius: 18px;

  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, 0.08) 0%,
    rgba(34, 197, 94, 0.03) 100%
  );

  border: 1px solid
    rgba(34, 197, 94, 0.16);

  position: relative;

  overflow: hidden;

  @media (max-width: 768px) {
    flex-direction: column;
  }

  &::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background: #22c55e;
  }

  h4 {
    color: #22c55e;

    font-size: 0.92rem;
    font-weight: 600;

    margin-bottom: 0.4rem;
  }

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

    font-size: 0.8rem;

    line-height: 1.8;
  }
}

.successIcon {
  width: 48px;
  height: 48px;

  min-width: 48px;

  border-radius: 14px;

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

  background: rgba(
    34,
    197,
    94,
    0.12
  );

  color: #22c55e;

  font-size: 1rem;
  font-weight: 700;
}

/* ==========================================
   FORM
========================================== */

.contactPage__form {
  display: flex;

  flex-direction: column;

  gap: 1.35rem;
}

.row {
  display: grid;

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

  gap: 1rem;

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

/* ==========================================
   FORM GROUP
========================================== */

.formGroup {
  display: flex;

  flex-direction: column;

  gap: 0.55rem;

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

    font-size: 0.78rem;

    font-weight: 500;
  }

  input,
  textarea {
    width: 100%;
    font-size: .85rem;
    border: 1px solid
      rgba(255, 255, 255, 0.08);

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

    border-radius: 14px;

    color: #fff;

    outline: none;

    transition: 0.25s ease;

    font-family: variables.$font;
  }

  input {
    height: 52px;

    padding: 0 1rem;
  }

  textarea {
    min-height: 180px;

    resize: vertical;

    padding: 1rem;

    line-height: 1.8;
  }

  input::placeholder,
  textarea::placeholder {
    color: rgba(
      255,
      255,
      255,
      0.35
    );
  }

  input:focus,
  textarea:focus {
    border-color: rgba(
      247,
      147,
      24,
      0.25
    );

    box-shadow:
      0 0 0 4px
        rgba(
          247,
          147,
          24,
          0.08
        );
  }

  input:disabled {
    opacity: 0.75;

    cursor: not-allowed;
  }
}

/* ==========================================
   BUTTON
========================================== */

.contactPage__form button {
  width: fit-content;

  min-width: 190px;

  height: 52px;

  padding: 0 1.5rem;

  border: none;

  border-radius: 14px;

  cursor: pointer;

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

  color: #111;

  font-size: 0.84rem;
  font-weight: 700;

  transition: all 0.25s ease;

  box-shadow:
    0 12px 30px
      rgba(
        247,
        147,
        24,
        0.18
      );

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

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

  &:disabled {
    opacity: 0.55;

    cursor: not-allowed;

    box-shadow: none;
  }

  @media (max-width: 768px) {
    width: 100%;

    min-width: 100%;
  }
}