/* ==========================================================
   LABORATORY SYSTEM
   PORTAL DE ENVIO
   Versão 1.0
========================================================== */

.upload-page {
  position: relative;

  min-height: 100vh;
  min-height: 100svh;

  padding:
    42px
    24px
    82px;

  color:
    var(--text-dark);

  background:
    linear-gradient(
      rgba(8, 47, 40, 0.38),
      rgba(8, 47, 40, 0.54)
    ),
    url("../assets/backgrounds/Background_green.png")
    center center / cover
    fixed
    no-repeat;
}

.upload-page::before {
  content: "";

  position: fixed;
  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.025) 0%,
      rgba(8, 47, 40, 0.08) 48%,
      rgba(8, 47, 40, 0.34) 100%
    );

  pointer-events: none;
}

.upload-container {
  position: relative;
  z-index: 1;

  width: min(900px, 100%);

  margin: 0 auto;
}

.upload-header {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 34px;

  text-align: center;

  animation:
    page-entrance
    700ms
    ease-out
    both;
}

.upload-brand {
  display: inline-block;

  margin-bottom: 20px;

  text-decoration: none;
}

.upload-logo {
  width: min(430px, 82vw);
  height: auto;

  filter:
    drop-shadow(
      0 8px 18px rgba(0, 0, 0, 0.1)
    );

  transition:
    transform var(--transition-standard);
}

.upload-brand:hover .upload-logo {
  transform:
    scale(1.015);
}

.upload-title {
  color:
    var(--white);

  font-size:
    clamp(
      1.15rem,
      2.7vw,
      1.8rem
    );

  font-weight:
    300;

  line-height:
    1.25;

  letter-spacing:
    clamp(
      0.12rem,
      0.5vw,
      0.36rem
    );

  text-transform:
    uppercase;

  text-shadow:
    0 4px 16px rgba(0, 0, 0, 0.14);
}

.upload-card {
  overflow: hidden;

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

  border-radius:
    26px;

  background:
    rgba(246, 244, 238, 0.98);

  box-shadow:
    var(--shadow-strong);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  animation:
    page-entrance
    700ms
    80ms
    ease-out
    both;
}

.exam-upload-form {
  display: flex;
  flex-direction: column;

  gap: 30px;

  padding:
    38px;
}

.upload-section {
  display: flex;
  flex-direction: column;

  gap: 18px;
}

.upload-section__title {
  color:
    var(--green-dark);

  font-size:
    1rem;

  font-weight:
    800;

  letter-spacing:
    0.06rem;

  text-transform:
    uppercase;
}

.patient-fields {
  display: grid;

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

  gap: 20px;
}

.patient-fields .form-field:first-child {
  grid-column:
    1 / -1;
}

.drop-zone {
  width: 100%;
  min-height: 220px;

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

  gap: 10px;

  padding:
    30px
    24px;

  border:
    2px dashed rgba(13, 70, 59, 0.24);

  border-radius:
    20px;

  color:
    var(--green-dark);

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

  cursor:
    pointer;

  transition:
    transform var(--transition-standard),
    border-color var(--transition-standard),
    background-color var(--transition-standard),
    box-shadow var(--transition-standard);
}

.drop-zone:hover,
.drop-zone.is-dragging {
  transform:
    translateY(-2px);

  border-color:
    var(--green-medium);

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

  box-shadow:
    0 14px 34px rgba(8, 47, 40, 0.1);
}

.drop-zone:focus-visible {
  outline:
    3px solid rgba(13, 70, 59, 0.2);

  outline-offset:
    5px;
}

.drop-zone__icon {
  width: 58px;
  height: 58px;

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

  margin-bottom: 4px;

  border-radius:
    18px;

  color:
    var(--green-dark);

  background:
    rgba(13, 70, 59, 0.08);
}

.drop-zone strong {
  color:
    var(--text-dark);

  font-size:
    1rem;

  text-align:
    center;
}

.drop-zone span:not(.drop-zone__icon) {
  color:
    var(--text-muted);

  font-size:
    0.9rem;

  text-align:
    center;
}

.drop-zone small {
  color:
    rgba(106, 123, 117, 0.78);

  font-size:
    0.78rem;

  text-align:
    center;
}

.selected-files {
  overflow: hidden;

  border:
    1px solid var(--border-soft);

  border-radius:
    18px;

  background:
    rgba(255, 255, 255, 0.72);
}

.selected-files[hidden] {
  display:
    none;
}

.selected-files__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    16px
    18px;

  border-bottom:
    1px solid rgba(23, 51, 44, 0.08);

  background:
    rgba(13, 70, 59, 0.05);
}

.selected-files__header strong {
  color:
    var(--text-dark);

  font-size:
    0.9rem;
}

.add-more-files {
  padding:
    8px
    11px;

  border:
    1px solid rgba(13, 70, 59, 0.16);

  border-radius:
    10px;

  color:
    var(--green-dark);

  background:
    var(--white);

  font-size:
    0.8rem;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    transform var(--transition-standard),
    border-color var(--transition-standard),
    box-shadow var(--transition-standard);
}

.add-more-files:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(13, 70, 59, 0.34);

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.07);
}

.selected-files__list {
  max-height:
    300px;

  overflow-y:
    auto;

  list-style:
    none;
}

.selected-file {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    14px
    18px;

  border-bottom:
    1px solid rgba(23, 51, 44, 0.07);
}

.selected-file:last-child {
  border-bottom:
    0;
}

.selected-file__name {
  min-width: 0;

  color:
    var(--text-dark);

  font-size:
    0.88rem;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.selected-file__remove {
  flex-shrink: 0;

  padding:
    7px
    9px;

  border-radius:
    8px;

  color:
    #c73e4f;

  background:
    rgba(214, 74, 91, 0.08);

  font-size:
    0.78rem;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    background-color var(--transition-standard),
    transform var(--transition-standard);
}

.selected-file__remove:hover {
  transform:
    translateY(-1px);

  background:
    rgba(214, 74, 91, 0.15);
}

.upload-notice {
  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.5;

  text-align:
    center;
}

.submit-exams-button {
  min-height:
    58px;

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

  padding:
    16px
    28px;

  border-radius:
    var(--radius-medium);

  color:
    var(--white);

  background:
    var(--green-dark);

  box-shadow:
    0 14px 30px rgba(8, 47, 40, 0.22);

  font-size:
    1rem;

  font-weight:
    750;

  letter-spacing:
    0.09rem;

  cursor:
    pointer;

  transition:
    transform var(--transition-standard),
    background-color var(--transition-standard),
    box-shadow var(--transition-standard);
}

.submit-exams-button:hover {
  transform:
    translateY(-2px)
    scale(1.01);

  background:
    var(--green-medium);

  box-shadow:
    0 18px 38px rgba(8, 47, 40, 0.3);
}

.submit-exams-button:disabled {
  opacity:
    0.62;

  cursor:
    wait;

  transform:
    none;

  box-shadow:
    none;
}

.upload-status {
  padding:
    16px
    18px;

  border-radius:
    14px;

  color:
    var(--text-dark);

  background:
    rgba(13, 70, 59, 0.07);

  font-size:
    0.88rem;

  line-height:
    1.5;

  text-align:
    center;
}

.upload-status[hidden] {
  display:
    none;
}

.upload-status[data-type="error"] {
  color:
    #a83242;

  background:
    rgba(214, 74, 91, 0.1);
}

.upload-success {
  min-height:
    520px;

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

  gap: 16px;

  padding:
    48px
    38px;

  text-align:
    center;
}

.upload-success[hidden] {
  display:
    none;
}

.upload-success__icon {
  width: 72px;
  height: 72px;

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

  margin-bottom:
    6px;

  border-radius:
    50%;

  color:
    var(--white);

  background:
    var(--green-dark);

  box-shadow:
    0 14px 30px rgba(8, 47, 40, 0.22);

  font-size:
    2rem;

  font-weight:
    700;
}

.upload-success h2 {
  color:
    var(--green-dark);

  font-size:
    clamp(
      1.4rem,
      3vw,
      2rem
    );
}

.upload-success p {
  max-width:
    620px;

  color:
    var(--text-muted);

  font-size:
    0.96rem;

  line-height:
    1.6;
}

.upload-success strong {
  margin-top:
    8px;

  color:
    var(--text-dark);
}

@media (max-width: 720px) {
  .upload-page {
    padding:
      32px
      16px
      82px;
  }

  .upload-header {
    margin-bottom:
      28px;
  }

  .upload-logo {
    width:
      min(390px, 88vw);
  }

  .exam-upload-form {
    gap:
      26px;

    padding:
      28px
      22px;
  }

  .patient-fields {
    grid-template-columns:
      1fr;
  }

  .patient-fields .form-field:first-child {
    grid-column:
      auto;
  }

  .drop-zone {
    min-height:
      200px;

    padding:
      26px
      18px;
  }
}

@media (max-width: 440px) {
  .upload-page {
    padding-inline:
      12px;
  }

  .exam-upload-form {
    padding:
      24px
      16px;
  }

  .upload-card {
    border-radius:
      22px;
  }

  .selected-files__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .add-more-files {
    width:
      100%;
  }

  .selected-file {
    align-items:
      flex-start;
  }

  .upload-success {
    padding:
      42px
      22px;
  }
}
/* ==========================================================
   02. DISPONIBILIDADE DE EXAMES E PRIVACIDADE
========================================================== */

.submission-choice {
  display: grid;

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

  gap:
    14px;

  margin: 0;
  padding: 0;

  border: 0;
}

.submission-choice legend {
  grid-column:
    1 / -1;

  margin-bottom:
    4px;
}

.submission-choice__option {
  min-height:
    70px;

  display: flex;
  align-items: center;

  gap:
    12px;

  padding:
    16px;

  border:
    1px solid var(--border-soft);

  border-radius:
    14px;

  color:
    var(--text-dark);

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

  cursor:
    pointer;

  transition:
    transform var(--transition-standard),
    border-color var(--transition-standard),
    background-color var(--transition-standard),
    box-shadow var(--transition-standard);
}

.submission-choice__option:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(13, 70, 59, 0.32);

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

  box-shadow:
    0 10px 24px rgba(8, 47, 40, 0.07);
}

.submission-choice__option:has(input:checked) {
  border-color:
    var(--green-medium);

  background:
    rgba(13, 70, 59, 0.08);

  box-shadow:
    0 0 0 3px rgba(13, 70, 59, 0.08);
}

.submission-choice__option input {
  width:
    18px;

  height:
    18px;

  flex-shrink:
    0;

  accent-color:
    var(--green-dark);
}

.submission-choice__option span {
  font-size:
    0.9rem;

  font-weight:
    650;

  line-height:
    1.4;
}

#files-section[hidden] {
  display:
    none;
}

.privacy-acceptance {
  padding:
    20px;

  border:
    1px solid rgba(13, 70, 59, 0.16);

  border-radius:
    16px;

  background:
    rgba(13, 70, 59, 0.055);
}

.privacy-acceptance__control {
  display: flex;
  align-items: flex-start;

  gap:
    12px;

  color:
    var(--text-dark);

  cursor:
    pointer;
}

.privacy-acceptance__control input {
  width:
    19px;

  height:
    19px;

  margin-top:
    2px;

  flex-shrink:
    0;

  accent-color:
    var(--green-dark);
}

.privacy-acceptance__control span {
  font-size:
    0.88rem;

  line-height:
    1.58;
}

.privacy-acceptance__control a {
  color:
    var(--green-dark);

  font-weight:
    750;

  text-decoration:
    underline;

  text-underline-offset:
    3px;
}

.privacy-acceptance__control a:hover {
  color:
    var(--green-medium);
}

.privacy-acceptance__note {
  margin:
    12px
    0
    0
    31px;

  color:
    var(--text-muted);

  font-size:
    0.78rem;

  line-height:
    1.5;
}

@media (max-width: 720px) {
  .submission-choice {
    grid-template-columns:
      1fr;
  }

  .submission-choice legend {
    grid-column:
      auto;
  }
}

@media (max-width: 440px) {
  .privacy-acceptance {
    padding:
      17px;
  }

  .privacy-acceptance__note {
    margin-left:
      0;
  }
}