/**
 * Psynicans Uniform Manager — frontend styles.
 * Every selector is scoped under .nuc-uniform-wrap so this file cannot
 * collide with Cosmika, WooCommerce, or Elementor styles.
 */

.nuc-uniform-wrap {
  --nuc-ink: #2b2320;
  --nuc-muted: #7a6f68;
  --nuc-line: #e4dcd3;
  --nuc-accent: #731D20;
  --nuc-accent-deep: #440d16;
  --nuc-bg: #faf7f2;

  box-sizing: border-box;
  max-width: 480px;
  margin: 28px 0;
  padding: 24px;
  background: var(--nuc-bg);
  border: 1px solid var(--nuc-line);
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--nuc-ink);
}

.nuc-uniform-wrap * {
  box-sizing: border-box;
}

.nuc-section {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--nuc-line);
}

.nuc-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.nuc-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nuc-muted);
  margin: 0 0 14px;
}

/* -------------------- logo upload -------------------- */

.nuc-file-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

#nuc_logo_input {
  display: block;
  width: 100%;
  font-size: 13px;
  padding: 8px 0;
}

.nuc-hint {
  font-size: 12px;
  color: var(--nuc-muted);
  margin: 6px 0 0;
}

/* -------------------- view tabs (front / side / back) -------------------- */

.nuc-view-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0;
}

.nuc-view-tab {
  appearance: none;
  flex: 1 1 0;
  height: 38px;
  border: 1px solid var(--nuc-line);
  border-radius: 3px;
  background: #fff;
  color: var(--nuc-ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.nuc-view-tab:hover {
  border-color: var(--nuc-accent);
}

.nuc-view-tab.nuc-view-tab-active {
  background: var(--nuc-accent);
  border-color: var(--nuc-accent);
  color: #fff;
}

/* -------------------- color tabs -------------------- */

.nuc-color-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nuc-color-tab {
  appearance: none;
  min-width: 72px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--nuc-line);
  border-radius: 3px;
  background: #fff;
  color: var(--nuc-ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.nuc-color-tab:hover {
  border-color: var(--nuc-accent);
}

.nuc-color-tab.nuc-color-tab-active {
  background: var(--nuc-accent);
  border-color: var(--nuc-accent);
  color: #fff;
}

/* -------------------- material/fabric pills -------------------- */
/* Same palette/typography as the color/view tabs — only the shape
   (fully rounded, per the reference image) is different. */

.nuc-material-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nuc-material-tab {
  appearance: none;
  min-width: 72px;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--nuc-line);
  border-radius: 999px;
  background: #fff;
  color: var(--nuc-ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.nuc-material-tab:hover {
  border-color: var(--nuc-accent);
}

.nuc-material-tab.nuc-material-tab-active {
  background: var(--nuc-accent);
  border-color: var(--nuc-accent);
  color: #fff;
}

/* -------------------- size guide -------------------- */

.nuc-size-guide-trigger-section {
  padding-top: 0;
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.nuc-size-guide-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  color: var(--nuc-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
}

.nuc-size-guide-btn:hover {
  color: var(--nuc-accent-deep);
}

.nuc-size-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.nuc-size-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 12, 0.65);
  backdrop-filter: blur(2px);
}

.nuc-size-guide-box {
  position: relative;
  background: #fff;
  border-radius: 24px;
  max-width: 980px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 36px 40px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  animation: nucSizeGuideIn 220ms ease;
}

.nuc-size-guide-box::before {
  content: '';
  position: absolute;
  inset: 3%;
  border: 1px solid var(--nuc-accent);
  border-radius: 16px;
  pointer-events: none;
}

@keyframes nucSizeGuideIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nuc-size-guide-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--nuc-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.nuc-size-guide-close:hover {
  background: var(--nuc-bg);
  color: var(--nuc-accent);
}

.nuc-size-guide-title {
  position: relative;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nuc-ink);
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nuc-line);
}

.nuc-size-guide-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 44px;
  height: 2px;
  background: var(--nuc-accent);
}

.nuc-size-guide-table-wrap {
  overflow-x: auto;
}

.nuc-size-guide-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.nuc-size-guide-table th,
.nuc-size-guide-table td {
  padding: 13px 18px;
  text-align: left;
  white-space: nowrap;
}

.nuc-size-guide-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nuc-muted);
  background: var(--nuc-bg);
  border-bottom: 2px solid var(--nuc-accent);
  white-space: nowrap;
}

.nuc-size-guide-table th:first-child,
.nuc-size-guide-table td:first-child {
  padding-left: 20px;
}

.nuc-size-guide-table tbody tr {
  border-bottom: 1px solid var(--nuc-line);
  transition: background 120ms ease;
}

.nuc-size-guide-table tbody tr:nth-child(even) {
  background: rgba(115, 29, 32, 0.025);
}

.nuc-size-guide-table tbody tr:hover {
  background: rgba(115, 29, 32, 0.06);
}

.nuc-size-guide-table td:first-child {
  font-weight: 700;
  color: var(--nuc-ink);
}

@media (max-width: 640px) {
  .nuc-size-guide-box {
    padding: 28px 20px 24px;
  }
  .nuc-size-guide-title {
    font-size: 16px;
  }
}

/* -------------------- mockup preview -------------------- */

.nuc-preview-box {
  position: relative;
  width: 100%;
  margin-top: 14px;
  border: 1px solid var(--nuc-line);
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  line-height: 0; /* prevents inline-image baseline gap */
}

/*
 * Floating copy of the preview, drawn directly on top of the theme's
 * own main product image (see the "host-image hijack" comment in
 * nuc-frontend.js). position:fixed + JS-synced top/left/width/height
 * — this element is appended to <body>, completely outside the
 * theme's own DOM tree, so nothing about it can conflict with
 * Elementor's layout/sticky logic. pointer-events:none so it never
 * blocks clicks on whatever the theme puts on/around that image.
 */
.nuc-host-overlay-root {
  position: fixed;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
  display: none; /* shown by JS once a host image is found and measured */
}

.nuc-host-overlay-root .nuc-mockup-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* the host slot's own aspect ratio may not match the mockup photo's */
}

.nuc-mockup-img {
  display: block;
  width: 100%;
  height: auto;
}

.nuc-logo-overlay {
  position: absolute;
  height: auto;
  pointer-events: none;
  /* Default/flat look — just enough shadow to separate the logo
     from the fabric behind it. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/*
 * Embroidered stitch effect — only applied when the admin has
 * explicitly turned it on for this product (.nuc-embroidered on the
 * wrap). Off by default, since not every uniform's logo is actually
 * embroidered (some are printed/heat-transferred), so a flat logo is
 * the more honest default preview.
 *
 * Approximates embroidery, not a literal thread simulation:
 * - two directional drop-shadows (light top-left, dark bottom-right)
 *   give a raised/puffy edge, like the logo sits slightly above the
 *   fabric rather than printed flat on it
 * - a third soft shadow separates it from the fabric underneath
 * - a slight saturation/contrast boost mimics the glossy, vivid look
 *   of real embroidery thread (see reference photo) rather than
 *   flatter print colors
 */
.nuc-embroidered .nuc-logo-overlay {
  filter:
    drop-shadow(0.5px 0.5px 0 rgba(0, 0, 0, 0.35))
    drop-shadow(-0.4px -0.4px 0 rgba(255, 255, 255, 0.35))
    drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25))
    saturate(1.15)
    contrast(1.1);
}

/*
 * Fine crosshatch pattern standing in for individual embroidery
 * stitches. Masked to the logo's OWN alpha shape (same image data
 * URL as .nuc-logo-overlay, set via JS) so the texture only ever
 * shows where the logo itself is opaque — never bleeding onto the
 * fabric around it. Sits directly on top of .nuc-logo-overlay at the
 * same position/size, updated together in JS. JS only ever shows
 * this element when the embroidery effect is on, but the CSS also
 * guards it here so the rule can never apply otherwise.
 */
.nuc-logo-overlay-texture {
  display: none !important;
}

.nuc-embroidered .nuc-logo-overlay-texture {
  display: block !important; /* JS still toggles this per logo-loaded state */
  position: absolute;
  height: auto;
  pointer-events: none;
  opacity: 0.7;
  mix-blend-mode: soft-light;
  /*
   * Real embroidery thread rows run tightly packed in one dominant
   * direction (satin stitch) with a much fainter cross-pass for
   * depth — not an even crosshatch. The primary layer is a very
   * short repeat (dense) at a slight diagonal; the second, fainter
   * layer runs closer to perpendicular at low opacity to suggest
   * stitch coverage changing direction around the logo's curves.
   */
  background-image:
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.9) 0px, rgba(255, 255, 255, 0.9) 0.6px, rgba(0, 0, 0, 0.45) 0.6px, rgba(0, 0, 0, 0.45) 1.2px),
    repeating-linear-gradient(10deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0.3) 0.6px, rgba(0, 0, 0, 0.15) 0.6px, rgba(0, 0, 0, 0.15) 1.2px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.nuc-mockup-unavailable {
  padding: 30px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--nuc-muted);
  line-height: 1.5;
}

/* -------------------- size steppers -------------------- */

.nuc-sizes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nuc-size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nuc-line);
}

.nuc-size-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.nuc-size-label {
  font-size: 15px;
  font-weight: 600;
  min-width: 40px;
}

.nuc-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--nuc-line);
  border-radius: 3px;
  overflow: hidden;
}

.nuc-btn {
  appearance: none;
  border: none;
  background: #fff;
  color: var(--nuc-ink);
  width: 38px;
  height: 38px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
  flex-shrink: 0;
}

.nuc-btn:hover {
  background: var(--nuc-accent);
  color: #fff;
}

.nuc-btn:active {
  background: var(--nuc-accent-deep);
}

.nuc-qty-input {
  width: 46px;
  height: 38px;
  border: none;
  border-left: 1px solid var(--nuc-line);
  border-right: 1px solid var(--nuc-line);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--nuc-ink);
  background: #fff;
}

.nuc-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--nuc-line);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nuc-muted);
}

/* -------------------- name / number / team (sportswear) -------------------- */

.nuc-nnt-team-row {
  margin-bottom: 16px;
}

.nuc-nnt-color-row {
  margin-bottom: 16px;
}

.nuc-nnt-color-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 4px;
}

.nuc-nnt-color-tab {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--nuc-line);
  cursor: pointer;
  padding: 0;
  transition: border-color 150ms ease, transform 150ms ease;
}

.nuc-nnt-color-tab:hover {
  transform: scale(1.08);
}

.nuc-nnt-color-tab.nuc-nnt-color-tab-active {
  border-color: var(--nuc-accent);
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px var(--nuc-accent);
}

.nuc-nnt-team-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--nuc-line);
  border-radius: 3px;
  font-size: 14px;
  color: var(--nuc-ink);
  margin: 6px 0;
}

.nuc-nnt-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.nuc-nnt-rows-head {
  display: grid;
  grid-template-columns: 1fr 70px 80px 84px;
  gap: 8px;
  padding: 0 2px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nuc-muted);
}

.nuc-nnt-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 2px;
}

.nuc-nnt-row {
  display: grid;
  grid-template-columns: 1fr 70px 80px 84px;
  gap: 8px;
  align-items: center;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: border-color 150ms ease, background 150ms ease;
}

.nuc-nnt-row-active {
  border-color: var(--nuc-accent);
  background: rgba(115, 29, 32, 0.04);
}

.nuc-nnt-row input,
.nuc-nnt-row select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--nuc-line);
  border-radius: 3px;
  font-size: 13px;
  color: var(--nuc-ink);
  background: #fff;
}

.nuc-nnt-row input:focus,
.nuc-nnt-row select:focus {
  outline: none;
  border-color: var(--nuc-accent);
}

.nuc-nnt-preview-btn {
  appearance: none;
  padding: 9px 8px;
  border: 1px solid var(--nuc-line);
  border-radius: 3px;
  background: #fff;
  color: var(--nuc-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.nuc-nnt-preview-btn:hover {
  border-color: var(--nuc-accent);
}

.nuc-nnt-row-active .nuc-nnt-preview-btn {
  background: var(--nuc-accent);
  border-color: var(--nuc-accent);
  color: #fff;
  cursor: default;
}

@media (max-width: 560px) {
  .nuc-nnt-rows-head,
  .nuc-nnt-row {
    grid-template-columns: 1fr 56px 64px 72px;
    gap: 6px;
  }
  .nuc-nnt-preview-btn {
    padding: 9px 4px;
    font-size: 10px;
  }
}

/* Live preview text drawn on the mockup for Name / Number / Team —
   positioned via JS (left/top %, font-size px) to match admin config. */
.nuc-nnt-overlay {
  position: absolute;
  pointer-events: none;
  color: #fff;
  font-weight: 400; /* Anton is already a single bold/condensed weight */
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.03em;
  font-family: 'Anton', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* dark + light shadow pair so white text reads against any jersey
     color, not just dark backgrounds */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 1px rgba(0, 0, 0, 0.45);
}

.nuc-total-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--nuc-ink);
  text-transform: none;
  letter-spacing: normal;
}

/* -------------------- sample size -------------------- */

.nuc-sample-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nuc-sample-btn {
  appearance: none;
  min-width: 48px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--nuc-line);
  border-radius: 3px;
  background: #fff;
  color: var(--nuc-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.nuc-sample-btn:hover {
  border-color: var(--nuc-accent);
}

.nuc-sample-btn.nuc-sample-selected {
  background: var(--nuc-accent);
  border-color: var(--nuc-accent);
  color: #fff;
}

/* -------------------- actions -------------------- */

.nuc-actions {
  display: flex;
  gap: 10px;
}

.nuc-cta {
  appearance: none;
  flex: 1 1 0;
  border: none;
  padding: 15px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
}

.nuc-enquire {
  background: #fff;
  color: var(--nuc-accent);
  border: 1px solid var(--nuc-accent);
}

.nuc-enquire:hover {
  background: var(--nuc-accent);
  color: #fff;
}

.nuc-sample {
  background: var(--nuc-accent);
  color: #fff;
}

.nuc-sample:hover {
  background: var(--nuc-accent-deep);
}

.nuc-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.nuc-error {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid #d9534f;
  border-radius: 3px;
  background: #fdf3f2;
  color: #a83731;
  font-size: 13px;
  line-height: 1.4;
}

/* -------------------- mobile -------------------- */

@media (max-width: 480px) {
  .nuc-uniform-wrap {
    max-width: 100%;
    padding: 18px;
  }

  .nuc-btn,
  .nuc-qty-input {
    height: 42px; /* larger tap targets on touch devices */
  }

  .nuc-btn {
    width: 42px;
  }

  .nuc-view-tab,
  .nuc-sample-btn,
  .nuc-material-tab {
    height: 42px;
  }

  .nuc-actions {
    flex-direction: column;
  }

  .nuc-cta {
    width: 100%;
  }
}