:root {
  --brand-pop: crimson;
  --main-grey: #e9e9e9;
  --light-grey: #f5f5f5;
  --clickable-pop-hover-color: #007bff;
  --link-blue: #007bff;
  --light-blue: aliceblue;
}

.nav .nav-link .active-text {
  display: none;
}

.nav .nav-link.active .active-text {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.big-heading {
  .preface {
    display: block;
    background-color: transparent;
    cursor: pointer;
    color: #333;
    text-decoration: none;
    font-size: 19px;
    margin: 0;
    position: relative;
    top: 4px;
  }
}

section {
  margin-bottom: 16px;
  background-color: #fff;
  border-radius: 5px;
  padding: 16px 16px;
}

section .heading {
  font-family: "Roboto", "Noto Sans", sans-serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 28px;
  margin-top: 16px;
  margin-bottom: 16px;
}

section.sign-in {
  a img {
    width: 200px;
    margin-top: 8px;
  }
}

section.upload {
  .dropzone.empty {
    min-height: 512px;
    background: linear-gradient(to bottom right, #f4f4f4, lavender);
    border: 2px dashed lavender;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    transition: all 0.3s ease-in-out;

    &.allow-image {
      background: linear-gradient(to bottom right, lavender, #f4f4f4);
    }

    &:hover,
    &.dragover {
      border-color: var(--clickable-pop-hover-color);
    }
  }

  .via-url-wrapper {
    margin-top: 8px;
    border: 1px solid #00000026;
    border-radius: 0.25rem;
    overflow: hidden;

    input {
      border: 0;
    }

    .input-group-append {
      display: inline-flex;
      align-items: center;
      margin-right: 3px;
    }
  }

  a.caption-link {
    font-size: 13px;
  }

  &.has-pdf {
    .dropzone,
    .via-url-wrapper,
    .caption-links {
      display: none;
    }

    .context.image-prompt {
      .clear-pages,
      .include-page {
        display: none;
      }
    }

    .context.pdf-prompt {
      .clear-image-array {
        display: none;
      }
    }
  }

  .cta {
    display: block;
    padding: 128px;
    font-size: 32px;
    line-height: 28px;
    font-weight: 400;
    font-family: "Roboto", "Noto Sans", sans-serif;
  }
}

section.upload.collapsed {
  padding: 0;

  .controls {
    .prompt-wrapper {
      .textarea-wrapper {
        margin-bottom: 0;

        textarea {
          background-color: var(--light-grey);
          pointer-events: none;
        }
      }
    }
  }

  canvas,
  .pdf-controls,
  .prompt-buttons,
  .context button {
    display: none;
  }
  .controls .context .pages {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  section.upload {
    .cta {
      padding: 16px;
    }

    .pdf-controls .page-number {
      display: none;
    }
  }
}

.controls {
  .prompt-wrapper {
    display: flex;
    flex-direction: column;

    .textarea-wrapper {
      border: 1px solid var(--main-grey);
      border-radius: 4px;
      margin-bottom: 8px;

      textarea {
        border: 0;
        resize: none;
        border-radius: 0;
        padding: 16px;
        font-size: 17px;
      }
    }

    .context {
      padding: 16px;
      background-color: #fff;
      border-top: 1px solid var(--main-grey);

      .pages {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;

        .alert {
          margin-bottom: 0;
        }
      }

      .page-context {
        width: 144px;
        height: 144px;
        border: 1px solid var(--main-grey);
        border-radius: 4px;
        padding: 2px;
        display: inline-block;

        img {
          transition: all 0.3s ease;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .context.image-prompt .page-context:hover {
      img {
        cursor: pointer;
        transform: scale(1.1);
      }
    }

    .prompt-buttons {
      display: flex;
      justify-content: space-between;
    }
  }

  .pdf-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-top: 16px;

    input.page-number {
      width: 128px;
    }
  }
}

.pdf-controls,
canvas {
  background: lavender;
}

canvas {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--main-grey);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

section p.explainer,
section .stripe-explanation,
section .explanation {
  line-height: 21px;
  font-size: 19px;
  color: #333;
  max-width: 512px;
  margin: 32px 0;
}

section.preview {
  .data-preview {
    table {
      tr.summary-row {
        background-color: aliceblue;
        font-weight: bold;
      }
    }

    .buttons button:first-child {
      margin-right: 16px;
    }

    .data-feedback {
      border-top: 1px solid var(--main-grey);
      margin-top: 32px;
    }

    .feedback-form {
      .feedback-textarea {
        margin-bottom: 8px;
      }
    }

    .feedback-link {
      display: inline-block;
      margin-top: 4px;
      color: var(--link-blue);
      cursor: pointer;
    }
  }
}

section.preview.collapsed {
  padding: 0;

  .heading,
  .actions,
  .data-feedback {
    display: none;
  }
}

section.purchase {
  form {
    hr {
      margin-top: 32px;
    }
  }

  .stripe-explanation {
    margin-bottom: 4px;

    a.stripe-link.badge-stripe-powered {
      width: 160px;
      display: inline-block;

      img {
        width: 100%;
      }
    }
  }
}

/*** OTHER RANDOM STUFF ***/

.hover-zoom {
  position: relative;
  overflow: visible;

  img {
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;

    &:hover {
      transform: scale(4);
      z-index: 10;
      border: 2px solid #ccc;
      border-radius: 8px;
    }
  }
}