/* ===========================================================================
 * uploader.css — the per-location upload slots (spec §3.1, row 4).
 *
 * SOURCES, merged:
 *   • printbere-theme-full/assets/pb-uploader.css                    (2,575 B)
 *   • extensions/printbere-storefront/assets/printbere.css lines 3-179
 *
 * WHY A MERGE AND NOT A VERBATIM COPY. The theme file self-documents as a port
 * of the extension's rules, and it is the LOSSIER of the two — the extension
 * has boxed warnings (including the `--low_dpi` variant the component renders),
 * a backdrop behind the thumbnail so a transparent PNG is visible at all, and
 * the acknowledgement pill; the theme has the warm `.pbpd`-palette borders and
 * the single-column slot layout that actually fits the PDP's ~500 px info
 * column. Neither file alone is right, so each rule below takes whichever
 * source is better for THIS layout, and says which when it is not obvious.
 *
 * ⚠ AND NEITHER IS LOADED ON THE LIVE PDP TODAY. `pb-product-redesign.liquid`
 *   never tags `pb-uploader.css`, and the extension sheet only arrives if an
 *   extension block happens to be on the template — so the JS-rendered upload
 *   slots are currently UNSTYLED on printbere.com. Spec §3.1 puts fixing that
 *   in scope ("a visible defect, not a redesign") and spec §7A lists "the
 *   now-styled upload slots" as an ACCEPTED difference in the side-by-side pass.
 *   It is the one region where this port is deliberately not pixel-identical.
 *
 * WHAT IS **NOT** HERE, and must not be added: every `.printbere-uploader__grid-*`
 * rule, `.pbpd-checkout-bar`, `.pbpd-blank-note`, `.pbpd-uploader`,
 * `.pbpd-size-grid`, `.pbpd-secondary-row` and `.pbpd-upload-btn`. Those live in
 * `public/storefront/product.css` — they are part of the section's own
 * `{% stylesheet %}` block, which T4 copied verbatim, and they are NEWER than
 * the extension's versions of the same selectors. Re-declaring any of them here
 * would silently override the section's styling with the older extension one,
 * because this sheet is linked after `product.css`.
 * =========================================================================== */

/* ── the container ─────────────────────────────────────────────────────────
 * NO box chrome by default. The container is always in the DOM (the panel is
 * collapsed, not unmounted), so bordering it unconditionally would put an empty
 * bordered rectangle on every PDP — a regression against live, where the
 * element is invisible. `product.css`'s `.pbpd-uploader{margin-top:18px}` is the
 * only thing that applies until the shopper opens the panel. */
.printbere-uploader.is-open {
  border: 1px solid var(--pbpd-border, #eceae4);
  border-radius: 10px;
  padding: 14px;
  background: var(--pbpd-card, #fff);
}

/* Single column, not the extension's `auto-fill minmax(260px, 1fr)` grid: this
 * panel lives in the PDP's info column, where two 260 px tracks do not fit and
 * a slot's warning text would wrap to four lines. */
.printbere-uploader__slots {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* `[hidden]` is a UA-stylesheet `display:none`, which a class rule with
 * `display:flex` beats on specificity. Without this line the "Upload your
 * graphics" toggle does nothing at all. */
.printbere-uploader__slots[hidden] {
  display: none;
}

/* ── one slot ─────────────────────────────────────────────────────────────── */
.printbere-uploader__slot {
  border: 1px solid var(--pbpd-border, #eceae4);
  border-radius: 8px;
  padding: 12px;
  background: var(--pbpd-card, #fff);
}
.printbere-uploader__slot-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.printbere-uploader__slot-head strong {
  font-size: 14px;
}

/* The dimension hint. The theme set these three colours inline from JS
 * (`hintEl.style.color`); they are classes here so the component stays free of
 * style objects and the palette is greppable. Values unchanged. */
.printbere-uploader__slot-dims {
  font-size: 12px;
  color: #6d7175;
}
.printbere-uploader__slot-dims.is-ok {
  color: #0a6929;
}
.printbere-uploader__slot-dims.is-warn {
  color: #c8472a;
}

/* ── the two per-slot toggles ─────────────────────────────────────────────── */
.printbere-uploader__oversize,
.printbere-uploader__custom-size-toggle {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #444;
  margin: 4px 0;
  cursor: pointer;
  line-height: 1.4;
}
.printbere-uploader__oversize input[type="checkbox"],
.printbere-uploader__custom-size-toggle input[type="checkbox"] {
  margin: 0;
  /* The label's `align-items:flex-start` puts the box on the first text line;
   * without this it rides the cap height and looks a pixel high. */
  margin-top: 2px;
  flex: none;
}
.printbere-uploader__custom-size-input {
  margin: 6px 0;
}
.printbere-uploader__custom-size-input input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--pbpd-input, #d9cdb9);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  background: #fff;
}
.printbere-uploader__custom-size-input input[type="text"]:focus {
  outline: none;
  border-color: var(--pbpd-orange, #f37520);
}

/* ── empty state ──────────────────────────────────────────────────────────── */
.printbere-uploader__drop {
  border: 2px dashed var(--pbpd-input, #d9cdb9);
  border-radius: 8px;
  padding: 18px 12px;
  text-align: center;
  font-size: 13px;
  color: #6d7175;
  transition: background 120ms ease, border-color 120ms ease;
}
.printbere-uploader__drop.is-over {
  border-color: var(--pbpd-orange, #f37520);
  background: #fff7f0;
}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.printbere-uploader__btn {
  border: 1px solid var(--pbpd-input, #d9cdb9);
  background: #fff;
  color: var(--pbpd-ink, #1a1a1a);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.printbere-uploader__btn:hover {
  background: #faf6ef;
}
.printbere-uploader__btn--link {
  border: none;
  background: none;
  color: var(--pbpd-orange, #f37520);
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
}
.printbere-uploader__btn--link:hover {
  background: none;
}
.printbere-uploader__btn--secondary {
  background: #f6f6f7;
}
.printbere-uploader__btn--warn {
  background: #fff4e5;
  border-color: #f0b429;
}
.printbere-uploader__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* ── filled state ─────────────────────────────────────────────────────────── */
/* The grey backdrop is the extension's and it is load-bearing: a print file is
 * a transparent PNG, and on a white card most of them are invisible. */
.printbere-uploader__thumb-wrap {
  display: flex;
  justify-content: center;
  background: #dedfe2;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
}
.printbere-uploader__thumb {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  display: block;
}
.printbere-uploader__filename {
  font-size: 12px;
  color: #5d5e62;
  text-align: center;
  margin-bottom: 8px;
  /* Uploaded filenames are routinely 60+ characters with no spaces. */
  word-break: break-all;
}

/* ── analyser feedback ────────────────────────────────────────────────────── */
.printbere-uploader__warnings {
  margin: 8px 0;
}
.printbere-uploader__warning {
  background: #fff4dc;
  border: 1px solid #f0d3a0;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  color: #7a4f00;
  margin-bottom: 6px;
  line-height: 1.4;
}
/* Low DPI is the one warning that means "this WILL print badly", so it reads
 * as an error rather than a caution. `size_too_small` is the degenerate-file
 * gate (a 1×1 export) and is at least as serious. */
.printbere-uploader__warning--low_dpi,
.printbere-uploader__warning--size_too_small {
  background: #fdecec;
  border-color: #f0a8a8;
  color: #8c1818;
}
.printbere-uploader__ack-badge {
  font-size: 11px;
  color: #0a6929;
  background: #e9f6ec;
  border: 1px solid #b8e0c2;
  padding: 3px 8px;
  border-radius: 999px;
}

/* ── transient states ─────────────────────────────────────────────────────── */
.printbere-uploader__uploading {
  text-align: center;
  color: #5d5e62;
  font-size: 13px;
  padding: 24px 8px;
}
.printbere-uploader__hint {
  font-size: 12px;
  color: #6d7175;
  padding: 6px 0;
}
.printbere-uploader__error {
  background: #fdecec;
  border: 1px solid #f0a8a8;
  color: #8c1818;
  border-radius: 6px;
  padding: 10px;
  font-size: 13px;
  margin-bottom: 8px;
  line-height: 1.4;
}