/** Shopify CDN: Minification failed

Line 30:13 Unexpected ".1\\/2--tablet"
Line 36:13 Unexpected ".1\\/2--lap-and-up"

**/
/* === Base Container === */
.return-form .form {
  max-width: 800px;  /* Set a comfortable max-width for your form */
  margin: 0 auto;    /* Center the form horizontally */
  padding: 1rem;
}

/* === Grid Layout === */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* Adds space between columns; adjust as needed */
}

/* 
  The HTML uses classes like 1/2--tablet and 1/2--lap-and-up.
  You can target them with escaped slashes in your CSS, e.g.:
*/
.grid__cell {
  flex: 1 1 100%; /* Default: single column on small screens */
}

@media (min-width: 768px) {
  .grid__cell.1\/2--tablet {
    flex: 1 1 50%; /* Two columns on tablet and up */
  }
}

@media (min-width: 1024px) {
  .grid__cell.1\/2--lap-and-up {
    flex: 1 1 50%; /* Two columns on larger screens as well */
  }
}

/* === Form Fields & Floating Labels === */
.form__input-wrapper {
  position: relative;
  margin-bottom: 1.5rem; 
}

.form__field {
  width: 100%;
  padding: 0.75rem;
  box-sizing: border-box;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  background: #fff;
}

/* For textareas */
.form__field--textarea {
  resize: vertical;
  min-height: 120px; /* Adjust as needed */
}

/* Floating label style */
.form__floating-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  transition: 0.2s ease all;
}

/* Move label up when input is focused or not empty */
.form__field:focus + .form__floating-label,
.form__field:not(:placeholder-shown) + .form__floating-label {
  top: 0;
  transform: translateY(-100%);
  font-size: 0.75rem;
  color: #666;
}

/* === Special Order Number Fields === */
.order-wrapper .order-input {
  display: flex;
  align-items: center;
}

.order-input .first-input {
  flex: 0 0 auto;
  width: 100px; /* Adjust width for "HD0000" as needed */
  margin-right: 0.5rem;
}

.order-input .last-input {
  flex: 1 1 auto;
}

/* === Button Styles === */
.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  border: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.button--primary {
  background-color: #333; /* Adjust primary color */
  color: #fff;
}

.button--primary:hover {
  background-color: #555; /* Hover color */
}

.button--min-width {
  min-width: 120px; /* Ensures button has a minimum clickable area */
}
.page__header {
  text-align: center;
}