.reptile-assay-form-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        .form_bottom {
            text-align: center;
            margin: 30px 0;
        }

        .action-buttons {
            margin-bottom: 26px;
            display: flex;
            justify-content: space-between;
            column-gap: 6px;
        }

        .fusion-woo-cart .fusion-button-wrapper {
            display: flex;
            align-items: center;
            margin-top: 1.2em;
            margin: auto;
            justify-content: center;
        }

        .total__price {
            font-size: 22px;
            font-weight: 700;
            margin: 26px 0;

        }

        .section-separator {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 30px 0;
            color: #666;
            font-size: 14px;
        }

        .section-separator::before,
        .section-separator::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #ccc;
            margin: 0 10px;
        }
.reptile-assay-form-container .reptile-assay-form:first-child .delete-reptile-assay {
    display: none!important;
}
        .delete-reptile-assay {
            color: rgb(255 255 255);
            font-size: 18px;
            width: 18px;
            background-color: #F44336;
            border-color: #E53935;
            border-radius: 50px;
            width: 42px;
            height: 42px;
            border: none;
            position: absolute;
            top: -15px;
            right: -15px;
            cursor: pointer;
        }

        @media (max-width: 768px) {
            .reptile-assay-form-container {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 500px) {
            .action-buttons {

                /* flex-wrap: nowrap; */
                flex-direction: column;
                row-gap: 10px;
            }
        }

        .reptile-assay-form {
            border: 1px solid #ccc;
            padding: 1rem;
            margin-bottom: 1rem;
            position: relative;
        }

        .action-buttons button {
            width: 100%;
            padding: 5px 15px;
        }

        .reptile-assay-form {
            border: 1px solid #ccc;
            padding: 15px;
            border-radius: 10px;
            background: #f9f9f9;
        }

        .reptile-assays {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .reptile-assays label {
            position: relative;
            display: inline-flex;
            align-items: center;
            cursor: pointer;
        }

        .reptile-assays label input[type="checkbox"] {
            display: none;
        }

        .reptile-assays label span {
            padding: 2px 10px;
            border: 2px solid #ccc;
            border-radius: 20px;
            transition: all 0.3s ease;
            background: #fff;
            font-weight: 500;
            user-select: none;
        }

        .reptile-assays label input[type="checkbox"]:checked+span {
            background-color: var(--awb-color5);
            color: white;
            border-color: var(--awb-color5);

        }

        .upload-content {
            border: 2px dashed #ccc;
            padding: 30px;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .upload-content.dragover {
            background-color: #f0f8ff;
            border-color: #007bff;
        }

        .upload-icon {
            margin-bottom: 15px;
            color: #007bff;
        }

        .upload-title {
            font-size: 18px;
            margin: 10px 0 5px;
        }

        .upload-subtitle {
            font-size: 14px;
            color: #777;
            margin-bottom: 15px;
        }

        .upload-button {
            padding: 10px 20px;
            font-size: 14px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
        }

        .upload-button:hover {
            background-color: #0056b3;
        }
         .assay_cost {margin-bottom: 0!important;}
        .assay_cost strong    {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}
    .assay_subtotal strong    {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.single_add_to_cart_button {
  display: none ;
}
.action-buttons .button.active{background-color: #000;}
.reptile-assay-tests-message a{
          font-weight: 700;
    color: #5745a5;
    border: 1px dashed;
    padding: 5px;
}
/* --- Animal source toggle + Cltch picker (#85/#86) --------------------------
   Only rendered for a connected customer; "Enter manually" is the default and
   the only path when not connected. Deliberately plain — the surrounding form
   is Avada-styled, so this keeps to spacing and a scroll bound on the list. */
.animal-picker-source {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.95em;
}
.animal-picker-source-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
/* The list floats under the field as a dropdown rather than living in its own
   box. Values here are matched to what Avada actually computes for the form's
   text inputs (1px #ccc border, 16px proxima-nova, 15px inner padding) and to
   .reptile-assay-form's 10px radius — buttons do NOT inherit page typography,
   so the options have to ask for it explicitly or they render as 13px Arial. */
.animal-picker-cltch-field {
  position: relative;
  /* Block, not inline-block: an inline-block label shrink-wraps, so the input's
     100% width would resolve against the label rather than the reptile card,
     leaving this field narrower than Known Genetics beside it. */
  display: block;
}
.animal-picker-cltch-search {
  width: 100%;
}
.animal-picker-cltch-panel {
  position: absolute;
  z-index: 20;
  left: 0;
  /* The menu starts at the field and grows right to fit a long reptile name.
     130% clears any realistic "Name — Species (Sex)" line at the form's 16px
     text without swallowing the card beside it; the vw term keeps the menu on
     screen once the cards stack single-column. Names past the cap still
     ellipsize. */
  min-width: 100%;
  width: max-content;
  max-width: min(130%, calc(100vw - 4rem));
  /* Detached from the 50px pill above it: butting a square menu against a
     pill reads as a rendering bug, a floating menu reads as intentional. */
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
/* The right-hand card of the two-column layout sits against the page edge, so a
   menu growing rightward from the field runs off screen and puts the whole page
   into horizontal scroll. There the menu grows leftward from the field's right
   edge instead. The 130% cap still applies, so it reaches no further into its
   neighbour than a left-column menu already does. Breakpoint matches the one
   that collapses .reptile-assay-form-container to a single column. */
@media (min-width: 769px) {
  .reptile-assay-form-container .reptile-assay-form:nth-child(even) .animal-picker-cltch-panel {
    left: auto;
    right: 0;
  }
}
.animal-picker-cltch-results {
  /* Bounded so a large collection scrolls rather than covering the form. Only
     one page is loaded at a time regardless. */
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.animal-picker-cltch-option {
  display: block;
  width: 100%;
  text-align: left;
  /* 15px matches the input's inner padding, so option text lines up with the
     text you typed above it. */
  padding: 10px 15px;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  /* Truncate rather than wrap: the menu is only as wide as the field, and a
     long animal name wrapping onto two lines makes the list hard to scan. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.animal-picker-cltch-option:hover,
.animal-picker-cltch-option:focus {
  /* The input's own background, so the hover belongs to the same palette. */
  background: #f2f3f5;
}
.animal-picker-cltch-empty {
  margin: 4px 0 0;
  color: #666;
  font-style: italic;
}