/* ─── Left-column preview ──────────────────────────────────────────── */
/* Sticky wrapper holding preview + label tabs so they scroll-follow
   together on desktop. When present, IT carries the sticky (and the
   preview block inside reverts to static). */
.quote-left-sticky {
  position: sticky;
  top: 8px;
  z-index: 5;
}
.quote-left-sticky .label-image-preview {
  position: static;
  top: auto;
}
.label-image-preview {
  position: sticky;
  top: 8px;
  z-index: 5;
  margin-top: 0;
  /* No padding on the section itself — the header has its own padding
     (so it doesn't kiss the side dashed borders), and the white print
     area extends edge-to-edge inside the section to maximize working
     space for the preview. */
  padding: 0;
  border: 1px dashed #cfcfcf;
  border-radius: 6px;
  background: #fafafa;
  overflow: hidden;  /* clip the print area's square bottom corners
                        inside the section's rounded dashed border */
}
/* Header packs PREVIEW + Remove background + Trash all on one line, tight
   vertical alignment. Smaller margins so the section takes minimal room. */
.label-image-preview__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  /* Header carries its own horizontal padding (the section has none) so
     it doesn't touch the side dashed borders. Vertical: tiny top buffer,
     normal-ish bottom so it's centered in its zone. */
  padding: 2px 10px 6px;
  /* All children share height: 22px + display: inline-flex + align-items: center
     so their TEXT is centered inside their boxes via flex (not line-height tricks).
     This makes PREVIEW glyphs and the button label sit on the same visual midline. */
}
/* Layout intent:
   [PREVIEW] [Remove background] _______________ [⋮] [🗑]
       │           │                              │   │
   left-anchored, sit next to each other      right-anchored cluster
   The button sits immediately after the title with the natural 8px
   header gap; the kebab+trash get pushed right via margin-left:auto on
   the kebab. */
/* Divi sets h4 { font-size: 18px; margin: 15px 0 8px; line-height: normal }
   which threw the title's vertical position off. !important is the
   shortest path to win that specificity battle. */
.label-image-preview__title.label-image-preview__title {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;
  line-height: 1 !important;
  font-size: 12px !important;
  /* Brand red — matches "Request For Quote" h4 in the section above. */
  color: #fb2525 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.label-image-preview__trash {
  /* Right-anchored last item. Auto left margin pushes the kebab+trash
     cluster to the far edge, leaving Preview + Remove background as a
     left-anchored cluster. The kebab carries the margin-left: auto. */
  background: transparent;
  border: 0;
  padding: 0 4px;
  height: 22px;
  cursor: pointer;
  border-radius: 3px;
  color: #9ca3af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
/* ─── Thread Color text input (woven label colors) ─────────────────
   Force thread sub-fields to full width (they ship as col-sm-6) so the
   hex picker + chart-picker input can sit side-by-side comfortably.
   Use flex for the label and input rows. */
.acf-field.tru-color-paired {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  clear: both !important;
  float: none !important;
}
.acf-field.tru-color-paired > .acf-label {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
}
.acf-field.tru-color-paired > .acf-label > label,
.acf-field.tru-color-paired > .acf-label > .tru-thread-name__label {
  margin: 0 !important;
  flex: 1 1 180px;
  min-width: 0;
}
/* Three-column layout: hex picker | thread chart picker | PMS picker.
   The chart-picker buttons live in their OWN wrappers (siblings of
   .acf-input) so wp-color-picker can't absorb them. */
.acf-field.tru-color-paired {
  display: grid !important;
  grid-template-columns: minmax(120px, 0.7fr) minmax(110px, 1fr) minmax(180px, 1.4fr);
  grid-column-gap: 8px;
  align-items: start;
}
.acf-field.tru-color-paired > .acf-label {
  grid-column: 1 / span 3;
  display: grid !important;
  grid-template-columns: minmax(120px, 0.7fr) minmax(110px, 1fr) minmax(180px, 1.4fr);
  grid-column-gap: 8px;
  align-items: baseline;
}
/* Section header rendered above the Background row (e.g. "Background
   Color") so the inner labels can just say "Hex Color" / "Thread Color". */
.acf-field.tru-color-paired > .tru-color-section-header {
  grid-column: 1 / span 3;
  font-size: 14px;
  font-weight: 700;
  color: #1e517f;
  margin: 14px 0 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid #1e517f;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.acf-field.tru-color-paired:first-of-type > .tru-color-section-header {
  margin-top: 4px;
}
/* Demote the per-input column labels to small captions so the
   subtitle (BACKGROUND COLOR / THREAD COLOR 1) stays visually dominant
   above the picker group. */
.acf-field.tru-color-paired > .acf-label {
  margin: 2px 0 4px !important;
}
.acf-field.tru-color-paired > .acf-label > label,
.acf-field.tru-color-paired > .acf-label > .tru-thread-name__label,
.acf-field.tru-color-paired > .acf-label > .tru-pms-name__label,
.acf-field.tru-color-paired > .acf-label > .tru-tcx-name__label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Per-column help icons stay visible — each column has its own
   "?" so users get the column-specific explanation (Thread vs Ink
   vs PMS vs TCX). The subtitle "?" covers the row-level concept. */
.acf-field.tru-color-paired > .acf-label > label,
.acf-field.tru-color-paired > .acf-label > .tru-thread-name__label,
.acf-field.tru-color-paired > .acf-label > .tru-pms-name__label,
.acf-field.tru-color-paired > .acf-label > .tru-tcx-name__label {
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acf-field.tru-color-paired > .acf-input {
  grid-column: 1;
}
.acf-field.tru-color-paired > .tru-thread-name-wrap,
.acf-field.tru-color-paired > .tru-pms-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;  /* matches wp-color-result button height */
}
.acf-field.tru-color-paired > .tru-thread-name-wrap { grid-column: 2; }
.acf-field.tru-color-paired > .tru-pms-name-wrap    { grid-column: 3; }

/* Pantone TCX is dropped for EVERY label type (textile-only, not
   relevant to these products). Hide any leftover TCX column/label so it
   can never render. */
.acf-field.tru-color-paired > .tru-tcx-name-wrap,
.acf-field.tru-color-paired > .acf-label > .tru-tcx-name__label {
  display: none !important;
}

/* Ink layout: 2 columns (Hex | Pantone PMS Color). The thread-chart
   column is irrelevant for printed/wash-care/hangtag/tagless, so hide
   it and pull PMS into col 2. */
.acf-field.tru-color-paired--ink-2col {
  grid-template-columns: minmax(140px, 0.8fr) minmax(200px, 1.6fr) !important;
}
.acf-field.tru-color-paired--ink-2col > .acf-label {
  grid-template-columns: minmax(140px, 0.8fr) minmax(200px, 1.6fr) !important;
  grid-column: 1 / span 2 !important;
}
.acf-field.tru-color-paired--ink-2col > .tru-color-section-header {
  grid-column: 1 / span 2 !important;
}
.acf-field.tru-color-paired--ink-2col > .tru-thread-name-wrap,
.acf-field.tru-color-paired--ink-2col > .acf-label > .tru-thread-name__label {
  display: none !important;
}
.acf-field.tru-color-paired--ink-2col > .tru-pms-name-wrap { grid-column: 2 !important; }
.acf-field.tru-color-paired--ink-2col > .acf-label > .tru-pms-name__label { grid-column: 2 !important; }
.tru-thread-name-wrap .tru-thread-name__input,
.tru-pms-name-wrap .tru-pms-name__input,
.tru-tcx-name-wrap .tru-tcx-name__input {
  width: 100%;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  visibility: visible !important;
  opacity: 1 !important;
  line-height: 1 !important;
}
.tru-thread-name__placeholder,
.tru-pms-name__placeholder,
.tru-thread-name__chosen,
.tru-pms-name__chosen {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Shrink the wp-color-result "Select Color" button to a small swatch.
   The text was redundant — the button is a swatch that opens the picker. */
.acf-field.tru-color-paired .wp-color-result {
  width: 36px !important;
  min-width: 36px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Top-align the hex column's picker with the thread/PMS inputs (it was
   sitting a few px lower because the .acf-input wrapper is taller). */
.acf-field.tru-color-paired > .acf-input { margin-top: 0 !important; align-self: start; }
.acf-field.tru-color-paired .wp-color-result .wp-color-result-text {
  display: none !important;
}
.acf-field.tru-color-paired .wp-color-result:after {
  display: none !important;
}
/* Editable hex field next to the swatch — the customer can read the
   current #XXXXXX OR type one in by hand. Two-way synced with the
   wp-color-picker by JS (300ms poll + input handler). */
.acf-field.tru-color-paired .acf-color-picker {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-height: 32px;
  margin: 0 !important;
}
input.tru-hex-value {
  font-family: monospace;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: 0.02em;
  white-space: nowrap;
  width: 78px;
  min-width: 0;
  flex: 0 1 78px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
}
input.tru-hex-value::placeholder { color: #aaa; font-weight: 400; text-transform: none; }
input.tru-hex-value:focus { outline: none; border-color: #1e517f; box-shadow: 0 0 0 2px rgba(30,81,127,0.15); }
/* type="search" is used to dodge wp-color-picker absorption — strip the
   native search decorations so these read as plain text inputs. */
.tru-pms-name__input::-webkit-search-cancel-button,
.tru-pms-name__input::-webkit-search-decoration,
input.tru-hex-value::-webkit-search-cancel-button,
input.tru-hex-value::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* Mobile portrait. Woven (Hex / Thread / PMS):
       Row 1: [Hex label]        [Thread label]
       Row 2: [swatch + hex inp] [Thread btn  ]
       Row 3: [Pantone PMS label — spans both ]
       Row 4: [PMS input + browse — spans both]
   Ink (Hex / PMS) collapses to a single two-up row.
*/
@media (max-width: 600px) {
  .acf-field.tru-color-paired--background .acf-label .tru-label-prefix {
    display: block;
    line-height: 1.1;
  }
  .acf-field.tru-color-paired > .tru-color-section-header {
    grid-column: 1 / span 2;
    font-size: 13px;
  }
  /* Collapse to 2 columns; children flow into rows (label, input, …). */
  .acf-field.tru-color-paired {
    grid-template-columns: 1fr 1fr !important;
    grid-column-gap: 8px !important;
    grid-row-gap: 4px !important;
  }
  /* Drop the inner-grid on the .acf-label and let each label sit in its
     own grid cell so we can explicitly place them. */
  .acf-field.tru-color-paired > .acf-label {
    display: contents !important;
  }
  .acf-field.tru-color-paired > .acf-label > label {
    grid-column: 1; grid-row: 1; margin: 0 !important;
    font-size: 12px; font-weight: 600;
  }
  .acf-field.tru-color-paired > .acf-label > .tru-thread-name__label {
    grid-column: 2; grid-row: 1;
    font-size: 12px;
  }
  .acf-field.tru-color-paired > .acf-input {
    grid-column: 1; grid-row: 2;
  }
  .acf-field.tru-color-paired > .tru-thread-name-wrap {
    grid-column: 2; grid-row: 2;
  }
  /* Woven: PMS label + input each span the full width on their own row. */
  .acf-field.tru-color-paired > .acf-label > .tru-pms-name__label {
    grid-column: 1 / span 2; grid-row: 3;
    font-size: 12px;
    padding-top: 6px;
  }
  .acf-field.tru-color-paired > .tru-pms-name-wrap {
    grid-column: 1 / span 2; grid-row: 4;
  }
  /* Ink (2-col): no thread row — Hex + PMS sit side by side. */
  .acf-field.tru-color-paired--ink-2col > .acf-label > .tru-pms-name__label {
    grid-column: 2 !important; grid-row: 1 !important; padding-top: 0 !important;
  }
  .acf-field.tru-color-paired--ink-2col > .tru-pms-name-wrap {
    grid-column: 2 !important; grid-row: 2 !important;
  }
  .acf-field.tru-color-paired .wp-color-result {
    width: 36px !important;
    min-width: 36px !important;
    height: 30px !important;
  }
  .tru-pms-name-wrap .tru-pms-name__input,
  .tru-thread-name-wrap .tru-thread-name__input {
    height: 30px !important;
    font-size: 12px !important;
    padding: 0 8px !important;
  }
  .tru-pms-swatch,
  .tru-thread-swatch { width: 32px; height: 32px; }
  input.tru-hex-value { width: 84px; height: 28px; }
  .tru-help-icon { width: 14px; height: 14px; font-size: 10px; margin-left: 3px; }
}

/* Hidden extra thread/ink color row — uses !important to beat
   .tru-color-paired's display:grid !important. */
.acf-field.tru-collapsed-color { display: none !important; }

/* Wash Care Label — three fixed sizes as selectable picture tiles
   (replaces the width/length dropdowns for this label type only).
   NOTE: the hidden width/length fields are visually hidden but kept in
   the layout (NOT display:none) so the live-preview reader still picks up
   the values a tile sets — display:none would make getDimsAndColor skip
   them and the preview wouldn't resize. */
.acf-field.tru-wc-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.tru-wc-sizes { margin: 4px 0 14px; }
.tru-wc-sizes__title {
  font-size: 13px;
  font-weight: 600;
  color: #1e517f;
  margin: 0 0 8px;
}
.tru-wc-sizes__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tru-wc-size {
  flex: 0 0 auto;
  width: 100px;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 10px 8px;
  border: 2px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.tru-wc-size:hover { border-color: #1e517f; }
.tru-wc-size.is-active {
  border-color: #1e517f;
  background: #eef4fa;
  box-shadow: 0 0 0 2px rgba(30, 81, 127, 0.15);
}
.tru-wc-size__icon {
  display: block;
  background: #fff;
  border: 2px solid #1e517f;
  border-radius: 2px;
  margin: 6px 0 2px;
  flex: 0 0 auto;
}
.tru-wc-size.is-active .tru-wc-size__icon { background: #dbe8f5; }
.tru-wc-size__label {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.1;
  text-align: center;
}
.tru-wc-size__sub {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .04em;
}
@media (max-width: 600px) {
  .tru-wc-size { width: calc(33.333% - 7px); min-height: 104px; padding: 8px 4px; }
  .tru-wc-size__label { font-size: 13px; }
}

/* Brief inline instructions on the Label Color group header.
   Full details live in the "?" popup next to it. */
.acf-field-group .acf-label .description.tru-color-brief {
  color: #555 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin: 4px 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.tru-color-brief__text { color: #555; }
.acf-field-group .acf-label .description.tru-color-brief a {
  color: inherit;
}

/* "+ Add another color" button at the bottom of the Label Color group */
.tru-add-color-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 6px 14px;
  background: transparent;
  color: #1e517f;
  border: 1px dashed #1e517f;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.tru-add-color-btn:hover {
  background: #1e517f;
  color: #fff;
}

/* Help "?" icon shown next to Thread Color / PMS Color labels */
.tru-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  background: #1e517f;
  color: #fff;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}
.tru-help-icon:hover { background: #2a6da6; }

.tru-help-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tru-help-popup__card {
  background: #fff;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.tru-help-popup__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
}
.tru-help-popup__header h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1e517f;
  flex: 1;
}
.tru-help-popup__close {
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  color: #555;
}
.tru-help-popup__close:hover { color: #000; }
.tru-help-popup__body {
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  overflow: auto;
}
.tru-help-popup__body p { margin: 0 0 10px; }
.tru-help-popup__body p:last-child { margin-bottom: 0; }
.tru-help-popup__footer {
  padding: 10px 18px 14px;
  text-align: right;
  border-top: 1px solid #eee;
}
.tru-help-popup__ok {
  background: #1e517f;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tru-help-popup__ok:hover { background: #164061; }

/* Pantone popup grid + cells */
.tru-pantone-search {
  flex: 0 0 220px;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.tru-pantone-grid {
  flex: 1;
  overflow: auto;
  padding: 8px;
  background: #f8f8f8;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
  align-content: start;
}
.tru-pantone-cell {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  font: inherit;
}
.tru-pantone-cell:hover { border-color: #1e517f; box-shadow: 0 0 0 1px #1e517f; }
.tru-pantone-cell__swatch {
  height: 32px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.1);
}
.tru-pantone-cell__name {
  font-size: 11px;
  font-weight: 600;
  color: #333;
  text-align: center;
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tru-thread-name__label {
  cursor: pointer;
}
.tru-thread-name__label:hover {
  color: #1e517f;
  text-decoration: underline;
}
.tru-thread-name__label {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
}
/* Shared style for Thread / PMS / TCX picker buttons — identical
   height, padding, border, font so the row reads as a clean tuple. */
.tru-thread-name__input,
.tru-pms-name__input,
.tru-tcx-name__input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  color: #222;
  text-align: left;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  line-height: 30px;
  display: inline-flex !important;
  align-items: center;
}
.tru-thread-name__input:hover,
.tru-pms-name__input:hover,
.tru-tcx-name__input:hover { border-color: #1e517f; }
.tru-thread-name__placeholder,
.tru-pms-name__placeholder,
.tru-tcx-name__placeholder { color: #999; font-style: italic; }
.tru-thread-name__chosen,
.tru-pms-name__chosen,
.tru-tcx-name__chosen { color: #1f2937; font-weight: 600; font-family: monospace; }

/* PMS column is a real text input (type-ahead off the datalist) + a
   SEPARATE "browse chart" button. Override the shared picker-button
   styling so the input reads/behaves as a text field, and lay the input
   + button out as a flex pair. */
/* Colour box on the left of the PMS / Thread input — reflects the
   selected colour AND is clickable to open the chart popup. Checkerboard
   when nothing is selected yet. */
.tru-pms-swatch,
.tru-thread-swatch {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.tru-pms-swatch:hover,
.tru-thread-swatch:hover { border-color: #1e517f; box-shadow: 0 0 0 2px rgba(30, 81, 127, 0.15); }
.tru-pms-swatch:focus,
.tru-thread-swatch:focus { outline: none; border-color: #1e517f; box-shadow: 0 0 0 2px rgba(30, 81, 127, 0.25); }
.tru-pms-swatch--empty,
.tru-thread-swatch--empty {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e2e2e2 25%, transparent 25%, transparent 75%, #e2e2e2 75%),
    linear-gradient(45deg, #e2e2e2 25%, #fff 25%, #fff 75%, #e2e2e2 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}
.tru-pms-name-wrap .tru-pms-name__input,
.tru-thread-name-wrap .tru-thread-name__input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  cursor: text;
  display: inline-block !important;
  font-family: monospace;
  text-transform: uppercase;
}
.tru-pms-name-wrap .tru-pms-name__input::placeholder,
.tru-thread-name-wrap .tru-thread-name__input::placeholder {
  color: #999;
  font-style: italic;
  text-transform: none;
  font-family: inherit;
}
.tru-pms-name-wrap .tru-pms-name__input:hover,
.tru-thread-name-wrap .tru-thread-name__input:hover { border-color: #888; }
.tru-pms-name-wrap .tru-pms-name__input:focus,
.tru-thread-name-wrap .tru-thread-name__input:focus {
  outline: none;
  border-color: #1e517f;
  box-shadow: 0 0 0 2px rgba(30, 81, 127, 0.15);
}
.tru-thread-name__input::-webkit-search-cancel-button,
.tru-thread-name__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
/* TCX swatch shows code + name on two lines in the popup grid */
.tru-pantone-cell__sub {
  font-size: 10px;
  color: #666;
  text-align: center;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tru-thread-name__input:hover { border-color: #888; }
.tru-thread-name__input:focus { outline: none; border-color: #1e517f; box-shadow: 0 0 0 2px rgba(30,81,127,0.15); }

/* Thread chart popup — full-screen modal with pan/zoom viewport */
.tru-thread-chart-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tru-thread-chart-popup__card {
  background: #fff;
  border-radius: 6px;
  width: 100vw;
  height: 100vh;
  max-width: 1400px;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.tru-thread-chart-popup__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}
.tru-thread-chart-popup__header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  min-width: 160px;
}
.tru-thread-chart-popup__tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tru-thread-chart-popup__ztool {
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 3px;
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #444;
  cursor: pointer;
  line-height: 1;
}
.tru-thread-chart-popup__ztool:hover { background: #f0f0f0; }
.tru-view-switch {
  background: transparent;
  border: 1px solid #1e517f;
  color: #1e517f;
  border-radius: 3px;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tru-view-switch:hover { background: #1e517f; color: #fff; }
.tru-thread-chart-popup__close {
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
  color: #555;
}
.tru-thread-chart-popup__close:hover { color: #000; }
.tru-thread-chart-popup__viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.tru-thread-chart-popup__viewport:active { cursor: grabbing; }
.tru-thread-chart-popup__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 14px;
}
.tru-thread-chart-popup__canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.tru-thread-chart-popup__hint {
  padding: 8px 14px;
  font-size: 12px;
  color: #666;
  border-top: 1px solid #eee;
  background: #fafafa;
  text-align: center;
}
@media (max-width: 600px) {
  .tru-thread-chart-popup__card { max-height: 100vh; border-radius: 0; }
  .tru-thread-chart-popup__header h4 { font-size: 13px; min-width: 0; flex-basis: 100%; }
  .tru-thread-chart-popup__hint { font-size: 11px; }
}

/* Multi-label tab bar — sits above the dropzone. Each tab is a single
   label; "+ Add Label" appends a new in-memory snapshot. Contact info
   below is shared across all labels. */
.quote-label-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  padding: 6px;
  background: #f3f6fa;
  border: 1px solid #d6dde6;
  border-radius: 5px;
}
.quote-label-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #c8d0db;
  border-radius: 3px;
  background: #fff;
  color: #1e517f;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.quote-label-tab:hover { background: #e9eff7; }
.quote-label-tab.is-active {
  background: #1e517f;
  color: #fff;
  border-color: #1e517f;
}
@keyframes tru-tab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(30,81,127,0.7); transform: scale(1); }
  50%  { box-shadow: 0 0 0 6px rgba(30,81,127,0); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(30,81,127,0); transform: scale(1); }
}
.quote-label-tab--just-added {
  animation: tru-tab-pulse 1s ease-out 2;
}
.quote-label-tab__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 14px;
  line-height: 1;
  margin-left: 4px;
  color: inherit;
}
.quote-label-tab__close:hover { background: rgba(255, 100, 100, 0.4); }
.quote-label-tab:not(.is-active) .quote-label-tab__close {
  background: #eef1f5;
  color: #888;
}
/* "+ Add Another Label" button — sits at the bottom of the form,
   above the Contact Information / Submit area. Full-width, prominent,
   dashed border so it's clearly an action that ADDS to the quote. */
.quote-label-add-bottom {
  display: block;
  width: 100%;
  margin: 24px 0 18px;
  padding: 14px 18px;
  border: 2px dashed #1e517f;
  border-radius: 6px;
  background: transparent;
  color: #1e517f;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-align: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.quote-label-add-bottom:hover {
  background: #1e517f;
  color: #fff;
}

/* Reset bar — sits at the very top of the right (form) column, above the
   upload dropzone. Hosts TWO buttons: AI Label Generator (left, injected
   by getquote-ai.js) and Reset (right). space-between pushes them to the
   edges; gap reserves spacing in case one is missing. align-items:center
   keeps unequal heights centered. Both buttons sized to ~36px tall. */
.quote-reset-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
}
.quote-reset-bar__btn {
  background: transparent;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 10px 18px;
  height: 44px;
  cursor: pointer;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.quote-reset-bar__btn:hover {
  background: #f0f0f0;
  color: #222;
  border-color: #aaa;
}
.label-image-preview__trash svg {
  width: 16px;
  height: 16px;
}

/* Zoom controls — compact +/− pair with a percentage readout. Floats over
   the bottom-right of the preview area (out of the header) so the header
   has room for the gear/settings icon without crowding. The JS still
   inserts the bar inside the header element; position:absolute pulls it
   out visually — that keeps the existing event wiring untouched.
   IMPORTANT: this requires .label-image-preview to be position:relative. */
.label-image-preview { position: relative; }
.label-image-preview__zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(4px);
}
.label-image-preview__zoom-btn {
  background: transparent;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  color: #555;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.label-image-preview__zoom-btn:hover {
  background: #f0f0f0;
  border-color: #aaa;
}
.label-image-preview__zoom-pct {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  min-width: 32px;
  text-align: center;
}

/* Three-dot menu button — same compact icon-button style as trash.
   First item in the right-anchored cluster, so it carries margin-left:auto
   that pushes the cluster to the far right. */
.label-image-preview__menu-btn {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 0 4px;
  height: 22px;
  cursor: pointer;
  border-radius: 3px;
  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__menu-btn svg { width: 16px; height: 16px; }
.label-image-preview__menu-btn:hover,
.label-image-preview__menu-btn:focus {
  background: #eef2f7;
  color: #1e517f;
  outline: none;
}

/* ─── Settings popup (modal-style, full-screen backdrop) ──────────── */
.label-image-preview__popup {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
  animation: lblPopFade 0.12s ease-out;
}
@keyframes lblPopFade { from { opacity: 0; } to { opacity: 1; } }
.label-image-preview__popup-card {
  background: #fff;
  border-radius: 8px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.label-image-preview__popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eef0f3;
}
.label-image-preview__popup-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}
.label-image-preview__popup-close {
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: #6a7280;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.label-image-preview__popup-close svg { width: 18px; height: 18px; }
.label-image-preview__popup-close:hover { background: #f3f4f6; color: #111827; }
.label-image-preview__popup-body {
  padding: 16px;
}
/* Footer with an OK button (bottom-right) to dismiss the settings popup. */
.label-image-preview__popup-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 14px;
  border-top: 1px solid #eef0f3;
}
.label-image-preview__popup-ok {
  border: 0;
  border-radius: 7px;
  background: #1e517f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 26px;
  cursor: pointer;
}
.label-image-preview__popup-ok:hover { background: #18415f; }
.label-image-preview__popup-row + .label-image-preview__popup-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}
.label-image-preview__popup-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
}
.label-image-preview__popup-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #6a7280;
  line-height: 1.4;
}
.label-image-preview__popup .label-image-preview__toggle {
  /* Wider in the popup so options breathe */
  width: 100%;
  height: 32px;
}
.label-image-preview__popup .label-image-preview__toggle button {
  flex: 1;
  font-size: 13px;
  padding: 0 14px;
}

/* Padding row inside the settings popup: Side selector + slider + value. */
.label-image-preview__popup-pad-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.label-image-preview__popup-select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  color: #111827;
  flex: 0 0 110px;
}
.label-image-preview__popup-slider {
  flex: 1;
  height: 32px;
  margin: 0;
}
.label-image-preview__popup-val {
  flex: 0 0 40px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  font-variant-numeric: tabular-nums;
}

/* Rotation row inside the popup: CCW button + degree label + CW button. */
.label-image-preview__popup-rot-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.label-image-preview__popup-iconbtn {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #fff;
  cursor: pointer;
  color: #374151;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.label-image-preview__popup-iconbtn svg { width: 20px; height: 20px; }
.label-image-preview__popup-iconbtn:hover { background: #f3f4f6; color: #1e517f; }

/* Image transform-origin centered so 90° rotation pivots around the
   image center (not the top-left corner). */
.label-image-preview__sized .label-image-preview__img {
  transform-origin: center center;
  transition: transform 0.18s ease;
}

/* Non-raster file chips (PSD/AI/etc.) AND PDF iframes/cards rendered
   inside the sized rect — fit to the rect's dimensions, not overflow. */
.label-image-preview__sized .label-image-preview__pdf,
.label-image-preview__sized .label-image-preview__pdf-card,
.label-image-preview__sized .label-image-preview__file {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 0;
  box-sizing: border-box;
}
.label-image-preview__sized .label-image-preview__pdf { background: #fff; }

/* Confirm-dialog action row (Cancel + Remove buttons). */
.label-image-preview__popup-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.label-image-preview__popup-cancel,
.label-image-preview__popup-confirm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}
.label-image-preview__popup-cancel {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}
.label-image-preview__popup-cancel:hover { background: #f3f4f6; }
.label-image-preview__popup-confirm {
  background: #c62828;
  color: #fff;
}
.label-image-preview__popup-confirm:hover { background: #a31515; }
.label-image-preview__trash:hover,
.label-image-preview__trash:focus {
  background: #ffe9e9;
  color: #c62828;
  outline: none;
}
.label-image-preview__area {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff;
  /* No border, no rounded corners (section's dashed border + overflow:hidden
     handles the visual frame). This lets the white print area extend
     edge-to-edge AND flush with the section's bottom — maximum room. */
  border: 0;
  border-radius: 0;
  /* Top padding fits the t-guide (22px tall, top:-22 from rect) with no
     extra gap — the number text sits vertically centered on the line so
     it doesn't need extra headroom above it.
     Side padding accommodates the wider l-guide (22px wide at left:-26).
     Bottom padding matches the top so the preview sits evenly centered
     in the white print area (was 0 / flush, which looked unbalanced). */
  padding: 22px 30px;
  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;
}
/* Live-sized wrapper around the image. JS sets width/height/padding to
   match width × length × sewing_area the user typed (1 inch = 80px,
   capped at 280px on the larger side). JS also sets background-color
   from the label_color field. The wrapper visually represents the
   physical label: the colored area = the fabric, the inner dashed
   outline = the design boundary (label minus sewing margin). */
.label-image-preview__sized {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: width 0.18s ease, height 0.18s ease, background-color 0.18s ease, padding 0.18s ease;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  /* Default fallback so the image is visible BEFORE user types dimensions. */
  width: 100%;
  max-width: 280px;
}
/* When dimensions ARE set, JS adds .has-dims and inline width/height
   overrides the default fallback. */
.label-image-preview__sized.has-dims {
  width: auto;     /* JS sets explicit width inline */
  max-width: none;
  position: relative;
  background-clip: padding-box;
}
/* Dashed outline at the design-area boundary (inner edge of the sewing
   margin). JS sets --sewing-px to the inset distance; pseudo-element draws
   the rectangle. Hidden when sewing_area is 0. */
.label-image-preview__sized.has-dims::before {
  content: '';
  position: absolute;
  /* --sewing-inset is set by JS: uniform "Npx" for most folds, asymmetric
     "0 Npx" for End fold (Manhattan, sides only). Falls back to legacy
     --sewing-px on older renders. */
  inset: var(--sewing-inset, var(--sewing-px, 0));
  border: 1px dashed rgba(0, 0, 0, 0.35);
  pointer-events: none;
  display: var(--sewing-display, none);
}

/* ─── Ruler-style dimension guides (top = width, left = length) ──────
   Two pseudo-elements on the wrapper (NOT on .sized — that's already used
   for the sewing dashed ring). We attach them to the parent .__area wrapper
   instead, anchored via the sized rect's actual dimensions.
   Implementation: use the sized rect's ::after for the TOP ruler (width),
   plus a wrapper pseudo for the LEFT ruler (length). The end caps are
   rendered with linear-gradient backgrounds on the bar pseudo. */
.label-image-preview__sized {
  /* Centered horizontally. Top ruler space is provided by the area's
     padding-top (which contains the t-guide that extends top:-22 above
     the rect) — no extra margin needed here. */
  margin: 0 auto;
}
/* No dimensions yet: skip the ruler space and cap the image height so
   the preview takes less vertical room overall. Tighter bottom feel. */
.label-image-preview__sized:not(.has-dims) {
  margin: 4px auto 4px auto;
  max-height: 160px;
}
.label-image-preview__sized:not(.has-dims) .label-image-preview__img {
  max-height: 160px;
}
/* TOP ruler — a real DOM element (.__t-guide) so we can put a chip
   with its own background OVER the line, making the line appear to
   break around the number instead of striking through it. The chip's
   bg matches the section bg (#fafafa). */
.label-image-preview__sized .label-image-preview__t-guide {
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background:
    linear-gradient(#888, #888) center 50% / 100% 1px no-repeat,
    linear-gradient(#888, #888) left  50% / 1px 11px no-repeat,
    linear-gradient(#888, #888) right 50% / 1px 11px no-repeat;
}
.label-image-preview__sized .label-image-preview__t-guide span {
  background: #fafafa;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  line-height: 1;
  white-space: nowrap;
}
/* LEFT ruler: length — same pattern, rotated. Use a wrapper pseudo on the
   parent .__area, anchored to the sized rect's height via JS-set inline
   variable (--rect-h). Actually simpler: put it on the sized rect using a
   plain ::before alternative is taken — use a real child via JS wrap.
   For simplicity (avoid touching JS structure) we use a plain background
   on the sized's left margin area with a sibling-less approach: a pseudo
   on .__area positioned next to the rect.

   But .__area doesn't know the rect's exact size. Compromise: render the
   left label as a small inline block in the sized's negative margin via
   CSS counter-style. We'll attach it via writing-mode rotation on the
   has-dims rect's inset-box-shadow — no, too clever. Use a real DIV. */
/* Left ruler — OUTSIDE the rect (left:-22) so it doesn't overlap the
   uploaded image. The area gets padding-left:32 below to make room. */
.label-image-preview__sized .label-image-preview__l-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -26px;
  width: 22px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background:
    linear-gradient(#888, #888) center center / 1px 100% no-repeat,
    linear-gradient(#888, #888) center top    / 11px 1px no-repeat,
    linear-gradient(#888, #888) center bottom / 11px 1px no-repeat;
}
.label-image-preview__sized .label-image-preview__l-guide span {
  background: #fafafa;
  padding: 6px 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  line-height: 1;
}
.label-image-preview__sized .label-image-preview__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* Parent .__sized is display:flex. Flex items default to min-width/min-height: auto
     which lets images grow to intrinsic size, OVERRIDING max-height/max-width.
     Explicit zero mins so max-height: 100% is honored. */
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  display: block;
}
/* Cover-fit toggle: when user picks Cover in the header pill, the image
   fills the label rect entirely (may crop edges). Default = contain. */
.label-image-preview__sized.is-cover .label-image-preview__img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* ─── Fold-type photo swap ────────────────────────────────────────────
   When material AND fold_type are both selected (and there's no uploaded
   image), JS sets background-image to the matching AI-generated label
   photo and adds .has-fold-photo. The photo replaces the SVG texture
   pattern. We KEEP multiply blend-mode so the AI photo (mostly white)
   tints with the user's chosen bg color — picking red bg shows a red
   version of the label. */
.label-image-preview__sized.has-fold-photo {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-position: center;
  /* Inherits background-blend-mode: multiply from the [data-material]
     rule above so the user's bg color shows through. */
}
.label-image-preview__sized.has-fold-photo .label-image-preview__placeholder {
  display: none;
}

/* ─── Material textures ──────────────────────────────────────────────
   The .label-image-preview__sized wrapper gets data-material="<slug>"
   set by JS based on the material/label-type fields. Each slug below
   maps to either:
     - SVG-pattern data-URI (default; body[data-texture-mode="svg"])
     - real photo at /wp-content/themes/tagsrus/textures/<slug>.jpg
       (when body[data-texture-mode="photo"])

   Both modes use background-blend-mode: multiply so the texture tints
   with whatever background-color the user picked. Switch via:
     - URL: ?textures=photo  (persisted to localStorage)
     - Console: localStorage.setItem('tagsRusTextures','photo'); reload */

.label-image-preview__sized[data-material] {
  background-blend-mode: multiply;
  background-repeat: repeat;
}

/* SVG patterns — default mode. Each is a tileable inline SVG, tiny,
   tints with the user's bg-color. */
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="satin"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="satin"] {
  background-image: linear-gradient(135deg,
    rgba(255,255,255,0.30) 0%,
    rgba(255,255,255,0.05) 45%,
    rgba(0,0,0,0.10) 100%);
  background-blend-mode: overlay;
}
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="twill"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="twill"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M-2 2L4 -4M-2 6L8 -4M2 8L8 2' stroke='black' stroke-opacity='0.18' stroke-width='1'/></svg>");
}
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="taffeta"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="taffeta"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='2'><rect width='6' height='1' fill='black' fill-opacity='0.10'/></svg>");
}
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="half-damask"],
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="full-damask"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="half-damask"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="full-damask"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='M10 0L20 10L10 20L0 10Z' fill='none' stroke='black' stroke-opacity='0.18'/><circle cx='10' cy='10' r='2' fill='black' fill-opacity='0.10'/></svg>");
  background-size: 20px 20px;
}
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="full-damask"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="full-damask"] {
  background-size: 14px 14px;  /* denser */
}
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="ultrasonic-laser"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="ultrasonic-laser"] {
  background-image: linear-gradient(180deg,
    rgba(255,255,255,0.18), rgba(0,0,0,0.10));
  background-blend-mode: overlay;
}
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="nylon"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="nylon"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='1' fill='white' fill-opacity='0.10'/><rect y='2' width='4' height='1' fill='black' fill-opacity='0.06'/></svg>");
}
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="polyester"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="polyester"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 3H6M3 0V6' stroke='black' stroke-opacity='0.14' stroke-width='0.5'/></svg>");
}
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="smooth-cotton"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="smooth-cotton"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='2' height='2' fill='black' fill-opacity='0.05'/><rect x='2' y='2' width='2' height='2' fill='black' fill-opacity='0.05'/></svg>");
}
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="leather"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="leather"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.25'/></svg>");
  background-size: 120px 120px;
}
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="rhinestone"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="rhinestone"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><circle cx='3' cy='3' r='1.4' fill='white' fill-opacity='0.55'/><circle cx='9' cy='8' r='1.0' fill='white' fill-opacity='0.45'/></svg>");
}
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="rubber"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="rubber"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='1'/></filter><rect width='80' height='80' filter='url(%23n)' opacity='0.10'/></svg>");
}
body[data-texture-mode="svg"] .label-image-preview__sized[data-material="paper"],
body:not([data-texture-mode]) .label-image-preview__sized[data-material="paper"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='1'/></filter><rect width='100' height='100' filter='url(%23n)' opacity='0.12'/></svg>");
}

/* Photo mode — drop tileable JPGs into wp-content/themes/tagsrus/textures/
   matching the slugs below. Until the file exists, the SVG fallback is
   inherited (browsers don't fall back automatically — append the SVG
   data-URI as a second background-image so a 404 doesn't go blank). */
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="satin"]   { background-image: url("textures/satin.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="twill"]   { background-image: url("textures/twill.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="taffeta"] { background-image: url("textures/taffeta.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="half-damask"] { background-image: url("textures/half-damask.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="full-damask"] { background-image: url("textures/full-damask.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="ultrasonic-laser"] { background-image: url("textures/ultrasonic-laser.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="nylon"]   { background-image: url("textures/nylon.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="polyester"] { background-image: url("textures/polyester.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="smooth-cotton"] { background-image: url("textures/smooth-cotton.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="leather"] { background-image: url("textures/leather.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="rhinestone"] { background-image: url("textures/rhinestone.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="rubber"]  { background-image: url("textures/rubber.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material="paper"]   { background-image: url("textures/paper.jpg"); }
body[data-texture-mode="photo"] .label-image-preview__sized[data-material] {
  background-size: cover;
  background-blend-mode: multiply;
}
.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 ─────────────────────────
   Lives in the header next to the bg-remove button (compact pill toggle).
   Same height as title + bg-remove button → clean header alignment. */
.label-image-preview__toggle {
  display: inline-flex;
  gap: 2px;
  background: #eef2f7;
  padding: 2px;
  border-radius: 6px;
  height: 24px;
  align-items: stretch;
}
.label-image-preview__toggle button {
  background: transparent;
  border: 0;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: #6a7280;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  line-height: 1;
}
.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);
}
/* When upload bytes hit 100% but the server is still processing, animate
   the bar so users see "still working" instead of "stuck at 100%". */
.tru-dropzone__progress--processing .tru-dropzone__progress-bar {
  background-image: linear-gradient(
    90deg,
    rgba(43, 140, 255, 0.85) 0%,
    rgba(102, 187, 255, 0.85) 50%,
    rgba(43, 140, 255, 0.85) 100%
  );
  background-size: 200% 100%;
  animation: tru-progress-stripe 1.2s linear infinite;
}
@keyframes tru-progress-stripe {
  from { background-position: 200% 0; }
  to   { background-position: 0 0; }
}

/* "Remove background" button + Original/No-BG toggle live INSIDE the header
   (next to the title). The preview area below gets the full width and
   vertical space — important on mobile where the preview is the focus. */
.label-image-preview__bg-remove {
  /* Sits immediately after the Preview title, identical height + flex
     centering so its label sits on the same visual midline as PREVIEW. */
  margin: 0;
  height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 11px;
  font-weight: 600;
  background: #1e517f;
  color: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.label-image-preview__bg-remove:hover:not([disabled]) { background: #16415e; }
.label-image-preview__bg-remove[disabled] { opacity: 0.6; cursor: wait; }

/* 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;
}

/* ─── Submit button + contact CTA on the right ────────────────────────
   Desktop: button on the left, "Please feel free to call us or email us
   At [phone numbers] [email]" on the right.
   Mobile: stacks — button on top, contact info below. */
.form-submit.form-submit--with-cta {
  display: flex;
  /* Submit button sits at the TOP of the row, level with the first
     line of the contact CTA — no center-alignment shift. */
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.form-submit.form-submit--with-cta input[type="submit"] {
  flex: 0 0 auto;
}
.quote-contact-cta {
  flex: 1 1 320px;
  min-width: 0;
  font-size: 14px;
  color: #333;
}
/* Force single-spacing — the page (Divi/theme) applies line-height
   1.7+ to <p> by default, and it has higher specificity than our
   class alone. !important + doubled selector wins. */
.quote-contact-cta.quote-contact-cta p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
}
.quote-contact-cta.quote-contact-cta p + p {
  margin-top: 0 !important;
}
.quote-contact-cta a {
  color: #1e517f;
  font-weight: 600;
  text-decoration: none;
}
.quote-contact-cta a:hover { text-decoration: underline; }

/* Tagline below the submit + contact CTA row. Italic + slightly muted
   so it reads as a brand statement, not a form field. */
.quote-tagline {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
  font-size: 14px;
  color: #4b5563;
  font-style: italic;
}
.quote-tagline.quote-tagline p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
.quote-tagline.quote-tagline p + p {
  margin-top: 4px !important;
}

@media (max-width: 767px) {
  .form-submit.form-submit--with-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .form-submit.form-submit--with-cta input[type="submit"] {
    width: 100%;
  }
  .quote-contact-cta {
    text-align: left;
    flex-basis: auto;
  }
  .quote-tagline {
    text-align: left;
  }
}

/* ─── Preview mode (recipient opens ?preview=<uuid>) ──────────────────
   STRICTLY READ-ONLY. The recipient is viewing the customer's saved
   configuration; they shouldn't be able to delete the image, change
   any field, or submit anything. */

/* Hide Contact Information section, Submit button + tagline + contact
   CTA — the recipient is just viewing, not submitting. */
body.is-getquote-preview .acf-field[data-key="field_61fc99127a3a2"],
body.is-getquote-preview .form-submit,
body.is-getquote-preview .quote-tagline,
body.is-getquote-preview .acf-form-submit {
  display: none !important;
}

/* Hide preview-block controls that would let someone alter the image:
   trash (delete), gear (settings popup), remove-bg, the No-BG/Original
   toggle, the entire dropzone area. */
body.is-getquote-preview .label-image-preview__trash,
body.is-getquote-preview .label-image-preview__menu-btn,
body.is-getquote-preview .label-image-preview__bg-remove,
body.is-getquote-preview .label-image-preview__toggle,
body.is-getquote-preview .label-image-preview__fit-toggle,
body.is-getquote-preview .acf-field-label-image--styled {
  display: none !important;
}

/* Block clicks/typing on every form input. pointer-events:none stops
   interaction; extra opacity/cursor hint communicates the read-only
   state. The form itself stays visible so the values are readable. */
body.is-getquote-preview .acf-form input,
body.is-getquote-preview .acf-form select,
body.is-getquote-preview .acf-form textarea,
body.is-getquote-preview .acf-form button,
body.is-getquote-preview .acf-form .acf-button {
  pointer-events: none !important;
  cursor: not-allowed !important;
  background: #fafafa !important;
}
/* Belt-and-braces: prevent ANY popup from being opened in preview mode
   in case JS slips through. */
body.is-getquote-preview .label-image-preview__popup {
  display: none !important;
}

/* ─── Mobile LANDSCAPE: side-by-side instead of stacked ──────────────
   When the viewport is wider than tall (landscape) and the screen is
   below tablet width, the form stacked vertically wastes screen real
   estate. Use a left strip for the preview and let the form scroll on
   the right. Sizing uses fixed pixels (not vw) so the right-side
   margin matches the preview's actual rendered width — no squish. */
@media (max-width: 991px) and (orientation: landscape) and (min-width: 568px) {
  /* Defeat Bootstrap's .row negative margin (-15px each side) AND each
     .col-*'s 100% width + 15px horizontal padding. Without this the
     right column ends up overlapping the fixed left strip. */
  .row .contact-left.col-xs-12,
  .row .contact-right.col-xs-12 {
    padding: 0 !important;
    float: none !important;
  }
  /* Left strip is STICKY (not fixed) — stays in view while the user
     scrolls through the form, but releases when the row ends so the
     footer can appear naturally below. */
  .contact-left {
    position: sticky !important;
    top: 8px;
    align-self: flex-start;
    width: 260px !important;
    max-height: calc(100vh - 16px);
    overflow: auto;
    z-index: 50;
  }
  /* Right column takes the remaining horizontal space. flex:1 (set on
     the parent row below) makes it grow into the gap left by the
     260px sticky strip. */
  .contact-right {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 8px 0 16px !important;
  }
  /* Convert the row to flexbox so left + right sit side-by-side without
     Bootstrap's negative margins / 100% width logic. Footer stays in
     normal flow BELOW the row (not affected by fixed positioning). */
  .row:has(> .contact-left.col-xs-12) {
    display: flex !important;
    align-items: flex-start;
    margin: 0 !important;
  }
  .acf-form { width: 100%; max-width: none !important; }
  /* Preview fits its own column without the JS-pin behavior */
  .label-image-preview {
    position: static;
    display: block !important;
  }
  /* Show dropzone OR preview on landscape (whichever is appropriate)
     regardless of has-label-image state on mobile. */
  body:not(.has-label-image) .acf-field-label-image--styled { display: block !important; }
  body.has-label-image .acf-field-label-image--styled { display: none !important; }
}

/* ─── Mobile (single column) ───────────────────────────────────────── */
@media (max-width: 767px) {
  /* On mobile: only ONE of (dropzone, preview) is shown — never both.
     Default = dropzone (the user needs to upload to do anything useful).
     After upload = preview (replaces dropzone, taking its slot). */
  .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; }

  /* On phones the preview's direct column (col-xs-12) is only as tall as
     the preview itself, so position:sticky can't track outside that box.
     Default: stay in flow at the top of the page where the user uploaded.
     JS toggles .label-image-preview--pinned when the user scrolls past it,
     swapping to position:fixed; scrolling back up removes the class.
     The column's min-height is set inline by JS while pinned so the form
     below doesn't jump. */
  body.has-label-image .label-image-preview {
    position: relative;
    margin-top: 12px;
  }
  body.has-label-image .label-image-preview.label-image-preview--pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    /* Flush at the top of the viewport — site header is position:static and
       scrolls away, so no offset needed. */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    /* GPU layer: prevents per-frame repaint while iOS Safari URL bar
       animates and the page scrolls past underneath. Without this the
       fixed element flickers on mobile. */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
  }
  /* Removed: max-height: 22vh on the img.
     It overrode max-height: 100% from the .__sized rule, letting the
     image grow taller than the user-specified label rect. The image
     is now constrained ONLY by its parent .__sized box (which has
     the correct W*L pixel dimensions from JS). */
  body.has-label-image .label-image-preview__area {
    min-height: 0;
    /* Cap the preview to ~60% of the screen height. When a zoomed-in label
       is taller/wider than that, the area turns into a pannable viewport —
       drag (finger-scroll) up/down (or sideways) to move the label around
       — instead of the preview growing and pushing the form off-screen.
       Below the cap (not zoomed) the area is shorter than 60vh, so this is
       inert until you actually zoom in. safe-center keeps the top reachable
       when the content overflows; overscroll-behavior stops the drag from
       scrolling the page once you hit an edge. */
    max-height: 60vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    align-items: safe center;
    justify-content: safe center;
  }
  /* Bg-remove button + toggle now live in the header — no special mobile
     positioning needed. Header flex-wrap handles narrow widths. */

  /* Dropzone pin: a sentinel placeholder (.tru-pin-sentinel) preserves the
     dropzone's slot when it goes fixed, so no layout shift on toggle. */
  .acf-field-label-image--styled.is-pinned-dropzone {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    margin: 0;
    padding: 8px 12px;
    background: #fff;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    /* Same GPU layer treatment as preview-pinned — kills mobile flicker. */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
  }
  .acf-field-label-image--styled.is-pinned-dropzone .tru-dropzone__zone {
    padding: 8px 12px;
    min-height: 0;
  }
  .acf-field-label-image--styled.is-pinned-dropzone .tru-dropzone__icon,
  .acf-field-label-image--styled.is-pinned-dropzone .tru-dropzone__hint {
    display: none;
  }

  /* 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). Layout (margins,
     paddings, title size) is governed by the base rules at the top of
     this file — overriding here would clobber the careful work for
     header alignment, flush print area, etc. */
  .label-image-preview { margin-bottom: 16px; }
  .label-image-preview__pdf { height: 280px; }
  .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; }
}