/*
 * Defaults
 */
#hsr * {
  border-radius: 0;
}

/*
 * Headings
 */
#hsr #form_returns h2 {
  margin-bottom: 1em;
}

/*
 * Buttons
 */
#hsr button {
  width: 100%;
  height: 52px;
  font-size: 1em;

  border: 1px solid transparent;
  border-radius: 3px;
  background-color: #f4f4f4;

  cursor: pointer;
  color: #333;
  overflow: hidden;
}

#hsr button[type="submit"] {
  color: #fff;
  background-color: #2d2d2d;
}

#hsr button:hover {
  color: #fff;
  background-color: #333;
}

@media (max-width: 512px) {
  #hsr button {
    max-width: 100%;
  }
}

/*
 * Inputs
 */
#hsr input:last-of-type {
  margin-bottom: 0;
}

#hsr input[type="file"] {
  font-size: 1em;
}

/*
 * Input Description
 */
#hsr input + p {
  font-size: 0.8em;

  color: #777;
}

#hsr input + p::before {
  content: '';
  margin: 0 calc(1ch + 0.25em) 0 0;
}

/*
 * Grid
 */
#hsr .grid {
  display: grid;
  grid-gap: 1rem;
}

#hsr .grid {
  grid-template-columns:
    minmax(200px, 1fr)
    minmax(150px, 0.5fr)
    minmax(200px, 1fr)
    minmax(150px, 0.8fr);
}

#hsr .grid .hsr_name {
  grid-row: 2 / 3;
  grid-column: 1 / 5;
}

#hsr .grid .hsr_issue {
  grid-row: 3 / 4;
  grid-column: 1 / 5;
}

#hsr .grid .hsr_photos {
  grid-column: 1 / 3;
}

#hsr .grid.photos button,
#hsr .grid.receipt button {
  opacity: 0;
  border-radius: unset;
}

#hsr .grid.photos:hover button,
#hsr .grid.receipt:hover button {
  opacity: 1;
}

#hsr .grid .hsr_receipt {
  grid-column: 3 / 5;
}

#hsr .grid .hsr_purchasedate {
  grid-column: 1 / 5;
}

#hsr .grid .hsr_options {
  grid-column: 1 / 5;
}

@media (max-width: 1024px) {
  #hsr .grid.photos button,
  #hsr .grid.receipt button {
    opacity: unset;
  }

  #hsr .grid {
    grid-template-columns: 1fr 1fr;
  }

  #hsr .grid .hsr_box {
    grid-area: unset;
  }

  #hsr .grid .hsr_name,
  #hsr .grid .hsr_issue,
  #hsr .grid .hsr_photos,
  #hsr .grid .hsr_receipt,
  #hsr .grid .hsr_purchasedate {
    grid-column: 1 / 3;
  }

}

@media (max-width: 512px) {
  #hsr .grid {
    grid-template-columns: 1fr;
  }

  #hsr .grid > * {
    grid-area: unset;
    grid-column: 1 / 2 !important;
  }
}

/*
 * Grid
 ** Photos
 ** Receipt
 */
#hsr .grid.photos,
#hsr .grid.receipt {
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 512px) {
  #hsr .grid.photos,
  #hsr .grid.receipt {
    grid-template-columns: 1fr;
  }
}


/*
 * Section
 */
#hsr .section {
  margin-bottom: 4rem;
}

#hsr #form_returns > div:last-of-type {
  padding-top: 4rem;
  margin-top: 1rem;
  border-top: 1px solid #d9d9d9;
}

/*
 * Field
 */
#hsr .field {
  margin-bottom: 1.6em;
}


/*
 * Box
 */
#hsr .hsr_box {
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  overflow: hidden;
}

#hsr .hsr_box h4 {
  padding: 0.8rem 1.2rem;

  font-size: 1em;

  border-bottom: 1px solid #d9d9d9;
}

#hsr .hsr_box.required h4::before {
  content: '*';
}

#hsr .hsr_box .padding {
  padding: 2em;
}

#hsr .hsr_box div input,
#hsr .hsr_box div textarea,
#hsr .hsr_box div select {
  width: 100%;
  border: none;
}

/*
 * Item
 */
#hsr #item_list {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem 0;

  margin-bottom: 2em;
}

#hsr .item_group {
  transition: border-radius 0.2s;
  border: 1px solid #d9d9d9;
  overflow: hidden;
}

#hsr .item_head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 1em 2em;
  font-size: 1em;

  background-color: #f4f4f4;
  cursor: pointer;
}

#hsr .item_head span.hsr_tag {
  padding: 0.2em 0.4em;

  font-size: 0.8em;

  color: #fff;
  background-color: #333;
  border-radius: 3px;
}

#hsr .item_body {
  transition: all 1s;

  padding: 2em;
}

/* Fallback */
#hsr .item_group.closed {
  border-radius: 3px;
}

#hsr .item_group.closed .item_body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
/********************/

#hsr .item_group.closed:not(:focus-within) {
  border-radius: 3px;
}

#hsr .item_group.closed:not(:focus-within) .item_body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * Add New Item
 */
#hsr #add_new_item {
  margin-bottom: 2em;
}

#hsr #add_new_item #hsr_options {
  display: none;
}

/*
 * Animations
 */
#hsr .notice {
  animation: 1s 0.8s notice 1;
}

@keyframes notice {
  0% {
    background-color: #ffff99;
  }

  100% {
    background-color: #f4f4f4;
  }
}

/*
 * Successful Submission
 */
#hsr #hsr_success {
  animation: backgroundGradient 2s infinite;
  padding: 10px 20px;
  margin-bottom: 2rem;

  color: #fff;
  background: linear-gradient(290deg, var(--color-green-alt) 1.25em, var(--color-green) 55%, var(--color-green) 100%) no-repeat 100% 100%;
  background-color: #86bd34;
  background-size: 200% 100%;
  background-position: 100% 100%;
  border: 1px solid #91c846;
}

@keyframes backgroundGradient {
  0% {
    background-position: 100% 100%;
  }

  50% {
    background-position: 0% 100%;
  }

  100% {
    background-position: 100% 100%;
  }
}