.gt-coa-search.coa {
  width: 100%;
  max-width: 1224px;
  margin-inline: auto;
  padding: 16px 0 48px;
}

.carousel-box:has(.gt-coa-search) {
  grid-template-columns: 1fr;
  min-height: auto;
}

.carousel-box:has(.gt-coa-search) .carousel-left,
.carousel-box__text:has(.gt-coa-search) {
  max-width: none;
  width: 100%;
}

.gt-coa-search .coa-label {
  display: block;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #1B1C20;
  margin: 0 0 8px;
}

.gt-coa-search .coa-form {
  display: block;
}

.gt-coa-search .coa-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 12px;
  align-items: center;
}

.gt-coa-search #gt-coa-search-lot {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(104, 122, 134, 0.5);
  border-radius: 4px;
  padding-left: 52px;
  padding-right: 14px;
  box-sizing: border-box;
  appearance: none;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: #000;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M20.0313 20.7925C20.4913 21.2525 21.2013 20.5425 20.7413 20.0925L16.9913 16.3325C18.3068 14.877 19.0339 12.9843 19.0313 11.0225C19.0313 6.6325 15.4613 3.0625 11.0713 3.0625C6.68133 3.0625 3.11133 6.6325 3.11133 11.0225C3.11133 15.4125 6.68133 18.9825 11.0713 18.9825C13.0513 18.9825 14.8813 18.2525 16.2813 17.0425L20.0313 20.7925ZM4.11033 11.0225C4.11033 7.1825 7.24033 4.0625 11.0703 4.0625C14.9103 4.0625 18.0303 7.1825 18.0303 11.0225C18.0303 14.8625 14.9103 17.9825 11.0703 17.9825C7.24033 17.9825 4.11033 14.8625 4.11033 11.0225Z' fill='%23687A86'/></svg>")
    no-repeat 12px 50% / 24px 24px;
}

.gt-coa-search #gt-coa-search-lot::placeholder {
  color: #687A86;
  opacity: 1;
}

.gt-coa-search #gt-coa-search-lot:focus-visible {
  outline: 1px solid #1BB6AB;
  outline-offset: 2px;
}

.gt-coa-search .coa-row button[type="submit"] {
  width: 130px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid #1BB6AB;
  background: #1BB6AB;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #FCFCFC;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.02s ease;
}

.gt-coa-search .coa-row button[type="submit"]:focus-visible {
  outline: 3px solid #1BB6AB;
  outline-offset: 2px;
}

.gt-coa-search .coa-row button[type="submit"]:hover {
  background: #17A89F;
  border-color: #17A89F;
}

.gt-coa-search .coa-row button[type="submit"]:active {
  transform: translateY(1px);
}

.gt-coa-search .coa-results {
  margin-top: 24px;
  width: 100%;
  max-width: none;
}

.gt-coa-search .coa-results__heading {
  margin: 40px 0 20px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000;
}

.gt-coa-search .coa-no-result {
  margin: 0;
  color: #687A86;
  font-size: 16px;
  line-height: 24px;
}

.gt-coa-search .coa-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 35px;
  padding: 20px 0;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}

.gt-coa-search .coa-card__left {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.gt-coa-search .coa-card__thumb {
  width: 80px;
  height: 80px;
  border: 0;
  background: url('icons/certificate.svg') center / 80px 80px no-repeat;
}

.gt-coa-search .coa-card__middle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.gt-coa-search .coa-card__title {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #000;
  margin: 0;
}

.gt-coa-search .coa-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #5B6573;
}

.gt-coa-search .coa-card__sep {
  opacity: 0.6;
}

.gt-coa-search .coa-card__meta-line {
  font-size: 12px;
  font-weight: 300;
  line-height: 24px;
  color: #687A86;
}

.gt-coa-search .coa-card__type {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 300;
  margin-right: 4px;
  color: #687A86;
}

.gt-coa-search .coa-card__action {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .gt-coa-search .coa-row {
    grid-template-columns: 1fr;
  }

  .gt-coa-search #gt-coa-search-lot {
    width: 100%;
  }

  .gt-coa-search .coa-row button[type="submit"] {
    width: 100%;
  }

  .gt-coa-search .coa-card {
    grid-template-columns: 48px 1fr;
    gap: 12px;
  }

  .gt-coa-search .coa-card__left,
  .gt-coa-search .coa-card__thumb {
    width: 48px;
    height: 48px;
    background-size: 48px 48px;
  }

  .gt-coa-search .coa-card__action {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 8px;
  }
}