/* Sample page (sample.html) only — reuses the white-card + soft-shadow
   language already used site-wide (.new-item / .testimonials-item /
   .stronghold-item) and the brand blue / gold-gradient already used for
   .register_form_btn, so this page stops feeling disconnected from the
   rest of the site instead of introducing a new style. */

.sample-page .sample_title {
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 14px;
}

.sample-page .sample_title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, rgba(223, 165, 21, 1) 0%, rgba(249, 195, 22, 1) 50%, rgba(222, 152, 30, 1) 100%);
}

/* Personal info block: keep the brand's grey card, just add shadow + radius for depth */
.sample-page .personal-info-card {
  background-color: #F4F4F4;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Children container drops its own card look — each child gets its own grey card below,
   so two kids no longer look glued together inside one grey slab */
.sample-page .children-wrap {
  background: none;
  box-shadow: none;
  padding: 0;
}

.sample-page .child {
  background-color: #F4F4F4;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 25px;
}

.sample-page .child_line {
  display: none;
}

.sample-page .remove_child {
  top: 20px;
  right: 20px;
  z-index: 2;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
}

/* Inputs / selects: always white when empty, focus state tied to brand blue */
.sample-page .register_input,
.sample-page .register_select {
  background-color: #fff;
}

.sample-page .register_input:focus,
.sample-page .register_select:focus {
  border-color: #004998;
  outline: none;
}

/* Chrome/Safari autofill turns inputs pale yellow — force it back to white */
.sample-page .register_input:-webkit-autofill,
.sample-page .register_input:-webkit-autofill:hover,
.sample-page .register_input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
}

/* Locked fields: for a logged-in member the name / mobile / email come from the member
   centre and cannot be edited here. They still have to be submitted with the form, so
   they are readonly rather than disabled — which means the rule above would paint them
   white and make them look editable. Grey them back out, matching Bootstrap's own
   readonly colour so this page and member.php look the same. */
.sample-page .register_input[readonly] {
  background-color: #E9ECEF;
  color: #727171;
  cursor: not-allowed;
}

.sample-page .register_input[readonly]:focus {
  border-color: #dbdbdb;
}

.sample-page .register_input[readonly]:-webkit-autofill,
.sample-page .register_input[readonly]:-webkit-autofill:hover,
.sample-page .register_input[readonly]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #E9ECEF inset;
  box-shadow: 0 0 0 1000px #E9ECEF inset;
}

/* The country code is a static span (.prefix_static) when locked, not a form control,
   so nothing greys it out on its own — it would sit white next to a grey number field. */
.sample-page .register_number.has_prefix .prefix_picker.is_locked .prefix_toggle {
  background: #E9ECEF;
  color: #727171;
  cursor: not-allowed;
}

/* Native radios & checkboxes pick up the brand colour instead of default grey/blue */
.sample-page .register_radio,
.sample-page .register_check {
  accent-color: #004998;
}

/* More breathing room for the milk-brand checkbox list */
.sample-page .form-check-inline {
  margin-right: 22px;
  margin-bottom: 10px;
}

/* Sample picker: grouped by type (Sachet / Can), each item shown as image + name + expandable details */
.sample-page .check_separator {
  margin: 18px 0 12px;
}

.sample-page label + .check_separator {
  margin-top: 10px;
}

.sample-page .sample-item-list {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 14px;
}

@media (min-width: 768px) {
  .sample-page .sample-item-list {
    grid-template-columns: 1fr;
  }
}

.sample-page .sample-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.sample-page .sample-item:has(.sample-select:checked) {
  border-color: #004998;
  background-color: #EAF3FB;
  box-shadow: 0 2px 8px 0 rgba(0, 73, 152, 0.18);
}

.sample-page .sample-item .sample-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sample-page .sample-item-card {
  position: relative;
  order: 1;
  display: flex;
  justify-content: center;
  padding: 14px 14px 0;
  margin: 0;
  cursor: pointer;
}

/* Custom checkbox indicator, top-right of the (clickable) image card —
   kept inside .sample-item-card so clicking it still toggles the
   checkbox via the label; putting it on .sample-item instead made it
   float outside the label over the details column and stopped working */
.sample-page .sample-item-card::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  border: 2px solid #c9c9c9;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  transition: border-color .2s ease, background-color .2s ease;
}

.sample-page .sample-select:checked ~ .sample-item-card::before {
  border-color: #004998;
  background-color: #004998;
}

.sample-page .sample-item-card::after {
  content: "\f00c";
  font-family: FontAwesome;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  opacity: 0;
  transition: opacity .2s ease;
}

.sample-page .sample-select:checked ~ .sample-item-card::after {
  opacity: 1;
}

.sample-page .sample-item-img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  flex-shrink: 0;
}

.sample-page .sample-item-name {
  order: 2;
  display: block;
  padding: 10px 14px 14px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #727171;
  line-height: 1.4;
}

.sample-page .sample-item-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: #eee;
  color: #999;
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
}

/* Unselectable item: checkbox + image + name are greyed out and inert,
   but "Sample details" underneath stays fully clickable */
.sample-page .sample-item.is-disabled .sample-item-card {
  cursor: not-allowed;
}

.sample-page .sample-item.is-disabled .sample-item-img,
.sample-page .sample-item.is-disabled .sample-item-name {
  opacity: .5;
}

.sample-page .sample-item.is-disabled .sample-item-card::before {
  background-color: #ececec;
  border-color: #d8d8d8;
}

.sample-page .sample-item-more {
  order: 3;
  border-top: 1px solid #eee;
}

.sample-page .sample-item-more summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background-color: #F7F9FB;
  font-size: 13px;
  font-weight: bold;
  color: #004998;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color .2s ease;
}

.sample-page .sample-item-more summary:hover {
  background-color: #EAF3FB;
}

.sample-page .sample-item-more summary::-webkit-details-marker {
  display: none;
}

.sample-page .sample-item-more summary::before {
  content: "\f129";
  font-family: FontAwesome;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #004998;
  color: #fff;
  font-size: 10px;
  flex-shrink: 0;
}

.sample-page .sample-item-more summary i {
  margin-left: auto;
  transition: transform .2s ease;
}

.sample-page .sample-item-more[open] summary {
  background-color: #EAF3FB;
  border-bottom: 1px solid #d8e6f3;
}

.sample-page .sample-item-more[open] summary i {
  transform: rotate(180deg);
}

.sample-page .sample-item-details {
  padding: 14px 14px 14px;
}

.sample-page .sample-item-detail-label {
  display: block;
  margin: 10px 0 4px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #004998;
}

.sample-page .sample-item-detail:first-child .sample-item-detail-label {
  margin-top: 0;
}

.sample-page .sample-item-detail p,
.sample-page .sample-item-detail ul {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #585858;
}

.sample-page .sample-item-detail ul {
  padding-left: 0;
  list-style-position: inside;
}

.sample-page .sample-item-placeholder {
  display: inline-block;
  background-color: #FFF7E0;
  border: 1px dashed #E0A800;
  border-radius: 4px;
  padding: 4px 8px;
  color: #8a6300;
  font-style: italic;
}

@media (max-width: 767px) {
  .sample-page .sample-item-list {
    grid-template-columns: 1fr;
  }

  /* Milk-brand checkboxes: fixed 2-column grid so the second column
     lines up on a consistent left edge instead of drifting with
     however long the first column's label happens to be */
  .sample-page .milk-brand-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
  }

  .sample-page .milk-brand-list .form-check-inline {
    margin-right: 0;
    margin-bottom: 0;
  }

  .sample-page .sample-item-img {
    width: 110px;
    height: 110px;
  }

  /* Bigger, easier-to-hit selection dot. Its real touch target is the
     whole .sample-item-card label (110px image + padding, well over
     44×44), not just this visual circle. */
  .sample-page .sample-item-card::before,
  .sample-page .sample-item-card::after {
    width: 28px;
    height: 28px;
  }

  .sample-page .sample-item-card::after {
    line-height: 28px;
    font-size: 13px;
  }

  .sample-page .sample-item-name {
    text-align: center;
  }
}

/* Desktop: unify all sample-item copy (title, tag, detail labels,
   detail body) to one font size */
@media (min-width: 768px) {
  .sample-page .sample-item-tag,
  .sample-page .sample-item-detail-label,
  .sample-page .sample-item-detail p,
  .sample-page .sample-item-detail ul {
    font-size: 14px;
  }

  .sample-page .sample-item-name {
    font-size: 21px;
  }

  /* Desktop: image + name stay stacked in the wide left column (name
     stays under the can, not spanning into the details), and details
     (right, always expanded — see the "open" attribute, no toggle
     bar) fill the rest of the row */
  .sample-page .sample-item {
    display: grid;
    grid-template-columns: 440px 1fr;
    grid-template-areas:
      "image details"
      "title details";
  }

  .sample-page .sample-item-name {
    grid-area: title;
    border-right: 1px solid #eee;
  }

  .sample-page .sample-item-card {
    grid-area: image;
    align-items: center;
    border-right: 1px solid #eee;
  }

  .sample-page .sample-item-img {
    width: 210px;
    height: 210px;
  }

  .sample-page .sample-item-more {
    grid-area: details;
    align-self: center;
    border-top: none;
  }

  .sample-page .sample-item-more summary {
    display: none;
  }

  .sample-page .sample-item-details {
    padding: 20px 24px;
  }
}