/* ─── Left-column preview ──────────────────────────────────────────── */
.label-image-preview {
  margin-top: 24px;
  padding: 16px;
  border: 1px dashed #cfcfcf;
  border-radius: 8px;
  background: #fafafa;
}
.label-image-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.label-image-preview__title {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
.label-image-preview__trash {
  background: transparent;
  border: 0;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  color: #6a7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.label-image-preview__trash:hover,
.label-image-preview__trash:focus {
  background: #ffe9e9;
  color: #c62828;
  outline: none;
}
.label-image-preview__area {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 6px;
  padding: 10px;
  overflow: hidden;
}
.label-image-preview__placeholder {
  color: #999;
  font-style: italic;
  text-align: center;
  margin: 0;
  font-size: 14px;
}
.label-image-preview__img {
  max-width: 100%;
  max-height: 560px;
  height: auto;
  width: 100%;
  object-fit: contain;
  display: block;
}
.label-image-preview__pdf {
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: 4px;
  background: #f4f4f4;
}
.label-image-preview__pdf-card {
  text-align: center;
  padding: 18px 12px;
  width: 100%;
}
.label-image-preview__cta {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 18px;
  background: #2b8cff;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
}
.label-image-preview__cta:hover { background: #1f6fcc; }
.label-image-preview__hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #888;
}
.label-image-preview__link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #1f6fcc;
  text-decoration: underline;
}
.label-image-preview__file {
  text-align: center;
  padding: 16px 8px;
}
.label-image-preview__icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 8px;
}
.label-image-preview__filename {
  font-weight: 600;
  color: #333;
  word-break: break-all;
  font-size: 14px;
}
.label-image-preview__filesize {
  color: #888;
  font-size: 12px;
  margin-top: 4px;
}

/* ─── Background-removal loader overlay ────────────────────────────── */
.label-image-preview__area {
  position: relative;  /* anchor for the overlay */
}
.label-image-preview__bg-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  z-index: 2;
}
.label-image-preview__bg-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #d6e4f5;
  border-top-color: #2b8cff;
  border-radius: 50%;
  animation: lblSpin 0.85s linear infinite;
  margin-bottom: 10px;
}
.label-image-preview__bg-text {
  color: #1f6fcc;
  font-weight: 600;
  font-size: 14px;
}
.label-image-preview__bg-stage {
  color: #6a7280;
  font-size: 12px;
  margin-top: 4px;
  min-height: 16px;
}
.label-image-preview__bg-error {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fff3f3;
  border: 1px solid #f5c2c2;
  border-radius: 4px;
  color: #c62828;
  font-size: 12px;
}

/* ─── Toggle: original vs background-removed ───────────────────────── */
.label-image-preview__toggle {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  background: #eef2f7;
  padding: 3px;
  border-radius: 6px;
  width: 100%;
}
.label-image-preview__toggle button {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #6a7280;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.label-image-preview__toggle button.is-active {
  background: #fff;
  color: #1f6fcc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Hide the Label Image field's own label + ACF instructions — both are
   already shown inside the dropzone. The dropzone hint pulls the real
   accepted formats and the size cap from PHP (tagsRUsGetquote.maxBytes),
   so the stale "3MB Limit" text from the ACF field config is hidden. */
.acf-field-label-image--styled > .acf-label,
.acf-field-label-image--styled .acf-instructions,
.acf-field-label-image--styled .acf-input > p.description,
.acf-field-label-image--styled .acf-input > .acf-tip {
  display: none !important;
}
/* Treat the entire Label Image field as the card so its outer edges
   line up exactly with the Label Type / Dimensions / etc. cards.
   The dashed border moves from the inner .tru-dropzone__zone up to
   the field itself. */
.acf-field-label-image--styled {
  background: #fafcff;
  border: 2px dashed #c8d4e3;
  border-radius: 8px;
  padding: 16px 18px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.acf-field-label-image--styled .acf-input { padding: 0; margin: 0; width: 100%; }
.acf-field-label-image--styled .tru-dropzone { margin: 0; width: 100%; }
.acf-field-label-image--styled .tru-dropzone__zone {
  border: 0;
  background: transparent;
  padding: 18px 8px;
}

/* Standalone Label Type field — wrap in the same card style as the
   group sections (Dimensions, Label Quantity, etc.) */
.acf-form .acf-field[data-key="field_61e603c2dc4fc"] {
  background: #fafbfd;
  border: 1px solid #e5e9ef;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.acf-form .acf-field[data-key="field_61e603c2dc4fc"] > .acf-label > label {
  font-size: 16px;
  color: #1f6fcc;
  margin-bottom: 12px;
  display: block;
}
/* Conditional fields (Material, Paper Type, Weight) get moved inside
   the Label Type card by JS — render them with a thin divider above
   so they read as a sub-section of the same card. Strip Bootstrap col
   padding so the inner select matches the Label Type select width. */
.acf-form .acf-field[data-key="field_61e603c2dc4fc"] .acf-input > .acf-field {
  margin-top: 14px;
  padding: 14px 0 0;
  border-top: 1px solid #e5e9ef;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}
.acf-form .acf-field[data-key="field_61e603c2dc4fc"] .acf-input > .acf-field:first-child {
  /* The select itself; no top divider on it. */
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ─── Custom dropzone (replaces ACF default uploader) ──────────────── */
.tru-dropzone {
  position: relative;
  margin: 8px 0;
}
.tru-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tru-dropzone__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
  border: 2px dashed #cfd8e3;
  border-radius: 10px;
  background: #fafcff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
  user-select: none;
}
.tru-dropzone__zone:hover,
.tru-dropzone__zone:focus {
  border-color: #2b8cff;
  background: #f0f7ff;
  outline: none;
}
.tru-dropzone__zone.is-dragover {
  border-color: #1f6fcc;
  background: #e3f0ff;
  transform: scale(1.01);
}
.tru-dropzone__icon {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 10px;
  color: #2b8cff;
}
.tru-dropzone__primary {
  font-size: 15px;
  color: #333;
  margin-bottom: 6px;
}
.tru-dropzone__primary strong { color: #1f6fcc; }
.tru-dropzone__browse {
  color: #2b8cff;
  text-decoration: underline;
}
.tru-dropzone__hint {
  font-size: 12px;
  color: #6a7280;
}

/* Progress bar */
.tru-dropzone__progress {
  position: relative;
  height: 22px;
  margin-top: 12px;
  background: #eef2f7;
  border-radius: 11px;
  overflow: hidden;
}
.tru-dropzone__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2b8cff, #66bbff);
  transition: width 0.18s ease-out;
}
.tru-dropzone__progress-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* Selected file chip (shown after success) */
.tru-dropzone__file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f0f9ff;
  border: 1px solid #cfe6ff;
  border-radius: 8px;
}
.tru-dropzone__file-icon {
  font-size: 22px;
  line-height: 1;
}
.tru-dropzone__file-name {
  flex: 1;
  font-weight: 600;
  color: #1f6fcc;
  word-break: break-all;
  font-size: 14px;
}
.tru-dropzone__file-size {
  color: #6a7280;
  font-size: 12px;
  white-space: nowrap;
}
.tru-dropzone__remove {
  background: transparent;
  border: 0;
  color: #6a7280;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.tru-dropzone__remove:hover {
  background: #ffe9e9;
  color: #c62828;
}

/* Error */
.tru-dropzone__error {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff3f3;
  border: 1px solid #f5c2c2;
  border-radius: 6px;
  color: #c62828;
  font-size: 13px;
}

/* ─── Get-Quote form polish (scoped to .acf-form on this page) ────── */
.acf-form .acf-fields > .acf-field {
  margin-bottom: 18px;
  padding: 0;
  border: 0;
}
/* Nested fields inside group containers (Dimensions, Label Color,
   Label Quantity, Contact Information) — kill ACF's default field
   separator borders and box edges. */
.acf-form .acf-field-group .acf-field,
.acf-form .acf-field-group .acf-fields,
.acf-form .acf-field-group .acf-input {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.acf-form .acf-field-group .acf-fields > .acf-field {
  margin-bottom: 14px;
}
.acf-form .acf-field-group .acf-fields > .acf-field:last-child {
  margin-bottom: 0;
}
.acf-form .acf-fields > .acf-field > .acf-label > label {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
  color: #1f2937;
}
.acf-form .acf-input input[type="text"],
.acf-form .acf-input input[type="email"],
.acf-form .acf-input input[type="number"],
.acf-form .acf-input input[type="url"],
.acf-form .acf-input input[type="tel"],
.acf-form .acf-input textarea,
.acf-form .acf-input select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d6dde6;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  color: #111827;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  box-sizing: border-box;
}
.acf-form .acf-input input:focus,
.acf-form .acf-input textarea:focus,
.acf-form .acf-input select:focus {
  outline: none;
  border-color: #2b8cff;
  box-shadow: 0 0 0 3px rgba(43, 140, 255, 0.15);
}
.acf-form .acf-input textarea { min-height: 96px; resize: vertical; }
.acf-form .acf-input select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236a7280' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* Group fields (Dimensions, Label Color, Label Quantity, Contact Info):
   outer card around each section, NO inner field separators / underlines. */
.acf-form .acf-field-group {
  background: #fafbfd;
  border: 1px solid #e5e9ef;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.acf-form .acf-field-group > .acf-label > label {
  font-size: 16px;
  color: #1f6fcc;
  margin-bottom: 12px;
  display: block;
}

/* Color picker rows */
.acf-form .acf-color-picker .wp-picker-container {
  display: inline-block;
}

/* Radio (Fold Type). ACF adds class .acf-hl (horizontal list) which uses
   float: left + margin-right on each <li> — fight that off so flex+gap
   gives uniform spacing. */
.acf-form .acf-radio-list,
.acf-form .acf-radio-list.acf-hl,
.acf-form .acf-radio-list.acf-bl {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}
/* The UL has a clearfix-style ::before with content:"" + display:block
   from a global rule. In a flex container with gap, that becomes an
   invisible flex item and pushes the first LI right by 10 px. Kill it. */
.acf-form .acf-radio-list::before,
.acf-form .acf-radio-list::after,
.acf-form .acf-radio-list.acf-hl::before,
.acf-form .acf-radio-list.acf-hl::after {
  content: none !important;
  display: none !important;
}
.acf-form .acf-radio-list li,
.acf-form .acf-radio-list.acf-hl li,
.acf-form .acf-radio-list.acf-bl li {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
  display: inline-flex;
}
.acf-form .acf-radio-list label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #d6dde6;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: #1f2937;
  margin: 0;
}

/* Submit button */
.acf-form .form-submit input[type="submit"],
.acf-form input[type="submit"].acf-button {
  background: linear-gradient(180deg, #2b8cff, #1f6fcc);
  color: #fff;
  border: 0;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: filter 0.12s ease;
}
.acf-form .form-submit input[type="submit"]:hover,
.acf-form input[type="submit"].acf-button:hover {
  filter: brightness(1.05);
}

/* Label Type ships with col-sm-6 in its ACF wrapper.class which makes
   it 50 % wide at >=576 px. Force full width at every viewport so its
   box matches the dropzone and group cards. */
.acf-form .acf-field[data-key="field_61e603c2dc4fc"] {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

/* Cap the entire form width on desktop so it doesn't stretch the full
   col-sm-8 right column. Every box (Label Type card, dropzone, group
   cards) inherits this cap from .acf-form's max-width. */
@media (min-width: 768px) {
  .contact-right .acf-form { max-width: 600px; }
}

/* ─── No horizontal overflow + equal column padding ───────────────── */
.acf-form,
.acf-form .acf-fields,
.acf-form .acf-field,
.acf-form .acf-input,
.acf-form .acf-field-group {
  box-sizing: border-box;
  max-width: 100%;
}
/* Remove Bootstrap col padding on fields nested inside our group cards
   (the group already supplies its own padding). */
.acf-form .acf-field-group .acf-fields > .acf-field {
  padding-left: 0;
  padding-right: 0;
}
/* Bootstrap row negative margin can poke out of our cards. */
.acf-form .acf-field-group .acf-fields {
  margin-left: 0;
  margin-right: 0;
}
/* Match horizontal padding between the left (description/preview) column
   and the right (form) column so they line up as equal "rails". */
.contact-left, .contact-right {
  padding-left: 15px;
  padding-right: 15px;
}
/* The form is rendered with an inner <div class="row"> wrapper (configured
   in acf_form html_before_fields). Bootstrap's .row uses margin: 0 -15px,
   which makes the form bleed 15px past the column padding. Cancel it. */
.contact-right .acf-form .row,
.contact-right > .row {
  margin-left: 0;
  margin-right: 0;
}

/* ─── Mobile (single column) ───────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hide preview block on mobile until something is uploaded; then
     swap dropzone <-> preview so the screen only shows one of them. */
  .label-image-preview { display: none; }
  body.has-label-image .label-image-preview { display: block; }
  body.has-label-image .acf-field-label-image--styled { display: none; }

  /* Mobile devices often OOM the in-browser bg-removal model.
     Silently fail and keep the original — never show the error. */
  .label-image-preview__bg-error { display: none !important; }

  /* Tighter padding & spacing */
  .acf-form .acf-fields > .acf-field { margin-bottom: 14px; }
  .acf-form .acf-field-group,
  .acf-form .acf-field[data-key="field_61e603c2dc4fc"] { padding: 12px 14px; margin-bottom: 14px; }
  .acf-form .acf-fields > .acf-field > .acf-label > label { font-size: 15px; }

  /* iOS focus-zoom prevention: inputs ≥16px font-size */
  .acf-form .acf-input input,
  .acf-form .acf-input textarea { font-size: 16px; padding: 12px 14px; }
  /* Keep extra right-padding on selects so the chevron doesn't overlap
     the text. Mobile padding rule above shouldn't shrink it. */
  .acf-form .acf-input select {
    font-size: 16px;
    padding: 12px 36px 12px 14px;
    line-height: 1.4;
    height: auto;
  }

  /* Bigger tap targets for radios + interactive chips */
  .acf-form .acf-radio-list label { padding: 10px 14px; font-size: 14px; }

  /* Submit: full-width branded CTA on mobile */
  .acf-form .form-submit { text-align: center; }
  .acf-form .form-submit input[type="submit"],
  .acf-form input[type="submit"].acf-button { width: 100%; padding: 16px 20px; font-size: 16px; }

  /* Preview block (sits above the form on mobile) */
  .label-image-preview {
    margin-top: 12px;
    margin-bottom: 16px;
    padding: 12px;
  }
  .label-image-preview__title { font-size: 15px; margin-bottom: 8px; }
  .label-image-preview__area {
    min-height: 120px;
    padding: 8px;
  }
  .label-image-preview__img { max-height: 420px; }
  .label-image-preview__pdf { height: 280px; }
  .label-image-preview__icon { font-size: 44px; }

  /* Dropzone */
  .tru-dropzone__zone { padding: 24px 14px; min-height: 140px; }
  .tru-dropzone__icon { font-size: 28px; margin-bottom: 6px; }
  .tru-dropzone__primary { font-size: 14px; line-height: 1.45; }
  .tru-dropzone__hint { font-size: 11px; }
  .tru-dropzone__file { padding: 12px 14px; }
  .tru-dropzone__file-name { font-size: 13px; }

  /* Title above the form: shrink the page hero copy */
  .singlePageTitle h1.pageTitle { font-size: 28px; }

  /* Description text in left column */
  .contact-left h4 { font-size: 18px; margin-bottom: 8px; }
  .contact-left .quote { font-size: 14px; line-height: 1.5; }
}