/* ==========================================================================
   WCUF – Shop front-end: file tiles, summary box, upload area
   A) .wcuf-fl / .wcuf-fgrid / .wcuf-ftile : files under each product (classic cart,
      classic checkout, Request a Quote list) and inside the summary box
   B) .wcuf-sum                             : "Uploads summary" box
   C) .wcuf-up / .wcuf-drop / .wcuf-sel     : upload area (product page, cart, checkout)
   L) .wcuf-lb                              : image lightbox
   Rules:
   - Font, font size and text colour come from the theme (inherit).
   - Neutral translucent colours only, so the same CSS works on light and dark themes.
   - Scheme follows the option "Colour of the upload boxes": add .wcuf-scheme-light (default)
     or .wcuf-scheme-dark on the outer wrapper.
   - Buttons use the option "Your own button colours" through --wcuf-btn-bg / --wcuf-btn-fg /
     --wcuf-btn-hover (print them inline on the wrapper when the option is on).
   - Selectors are a bit more specific than usual and a few sizes use !important on purpose:
     themes often style "table td img", "ul li", "button" very strongly.
   ========================================================================== */

/* ---------- Scheme tokens ---------- */
.wcuf-scheme-light, .wcuf-fl, .wcuf-sum, .wcuf-up {
  --wcuf-tile: #FFFFFF;
  --wcuf-line: rgba(0, 0, 0, .13);
  --wcuf-soft: rgba(0, 0, 0, .03);
  --wcuf-muted: rgba(0, 0, 0, .62);
  --wcuf-media: #F2F3F4;
  --wcuf-ok: #00873A;
  --wcuf-wait: #8A6D00;
  --wcuf-no: #C02B2D;
}
.wcuf-scheme-dark, .wcuf-scheme-dark .wcuf-fl, .wcuf-scheme-dark .wcuf-sum, .wcuf-scheme-dark .wcuf-up {
  --wcuf-tile: rgba(255, 255, 255, .04);
  --wcuf-line: rgba(255, 255, 255, .16);
  --wcuf-soft: rgba(255, 255, 255, .04);
  --wcuf-muted: rgba(255, 255, 255, .68);
  --wcuf-media: rgba(255, 255, 255, .07);
  --wcuf-ok: #5BD08A;
  --wcuf-wait: #F0C75E;
  --wcuf-no: #FF8A8C;
}
.wcuf-fl, .wcuf-sum, .wcuf-up, .wcuf-fl *, .wcuf-sum *, .wcuf-up * { box-sizing: border-box; }
/* WooCommerce's responsive cart table aligns its cells to the right on phones */
.wcuf-fl, .wcuf-sum, .wcuf-up { text-align: start; }

/* ---------- Buttons (theme / plugin colours) ---------- */
.wcuf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; margin: 0; border: 0; border-radius: 6px; background: var(--wcuf-btn-bg, currentColor); color: var(--wcuf-btn-fg, #FFFFFF); font: inherit; font-size: .9375em; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; }
.wcuf-btn:hover { background: var(--wcuf-btn-hover, var(--wcuf-btn-bg, currentColor)); color: var(--wcuf-btn-fg, #FFFFFF); }
.wcuf-btn:not([style*="--wcuf-btn-bg"]) span, .wcuf-btn svg { flex: none; }
.wcuf-btn--outline { min-height: 36px; padding: 0 14px; border: 1px solid currentColor; background: transparent; color: inherit; font-size: .875em; }
.wcuf-btn--outline:hover { background: var(--wcuf-soft); color: inherit; }
.wcuf-link { padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; font-size: .875em; font-weight: 500; text-decoration: underline; cursor: pointer; }
.wcuf-btn:focus-visible, .wcuf-link:focus-visible, .wcuf-ftile__media:focus-visible, .wcuf-iconbtn:focus-visible, .wcuf-drop:focus-within, .wcuf-fmore:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.wcuf-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0; flex: none; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; opacity: .78; }
.wcuf-iconbtn:hover { opacity: 1; background: var(--wcuf-soft); }
.wcuf-iconbtn svg { width: 16px; height: 16px; }

/* ==========================================================================
   A · Files block (one per field) + tile grid
   ========================================================================== */
.wcuf-fl { margin: 12px 0 0; }
.wcuf-fl__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 8px; font-size: .875em; font-weight: 600; line-height: 1.35; }
.wcuf-fl__count { font-size: .857em; font-weight: 400; color: var(--wcuf-muted); }
.wcuf-fl__cost { margin: -4px 0 8px; font-size: .8125em; color: var(--wcuf-muted); }

ul.wcuf-fgrid { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
ul.wcuf-fgrid--s { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
ul.wcuf-fgrid--m { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
ul.wcuf-fgrid > li { margin: 0; padding: 0; list-style: none; }
ul.wcuf-fgrid > li::before, ul.wcuf-fgrid > li::marker { content: none; }

.wcuf-ftile { position: relative; min-width: 0; border: 1px solid var(--wcuf-line); border-radius: 8px; background: var(--wcuf-tile); overflow: hidden; }
.wcuf-ftile__media { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; padding: 0; margin: 0; border: 0; border-radius: 0; background: var(--wcuf-media); color: inherit; }
button.wcuf-ftile__media { cursor: zoom-in; }
.wcuf-ftile .wcuf-ftile__img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover; border-radius: 0; }

/* File-type label: coloured for known types, grey + extension for any other type */
.wcuf-badge { display: flex; align-items: flex-end; justify-content: center; width: 34%; max-width: 46px; aspect-ratio: 4 / 5; padding-bottom: 6%; border-radius: 5px; background: #787C82; color: #FFFFFF; font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; }
.wcuf-fgrid--m .wcuf-badge { font-size: 11px; }
.wcuf-badge--pdf { background: #D63638; }
.wcuf-badge--csv, .wcuf-badge--xls, .wcuf-badge--xlsx { background: #00A32A; }
.wcuf-badge--doc, .wcuf-badge--docx, .wcuf-badge--txt { background: #2271B1; }
.wcuf-badge--zip, .wcuf-badge--rar, .wcuf-badge--7z { background: #8A6D00; }
.wcuf-badge--audio, .wcuf-badge--video { background: #6B4E9B; }

.wcuf-ftile__body { padding: 6px 8px 8px; }
.wcuf-fgrid--m .wcuf-ftile__body { padding: 8px 10px 10px; }
.wcuf-ftile__name { display: block; overflow: hidden; font-size: .78em; font-weight: 600; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.wcuf-ftile__meta { display: block; overflow: hidden; margin-top: 1px; font-size: .72em; line-height: 1.35; color: var(--wcuf-muted); white-space: nowrap; text-overflow: ellipsis; }
.wcuf-ftile__note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; padding-left: 6px; border-left: 2px solid var(--wcuf-line); font-size: .72em; line-height: 1.4; font-style: italic; color: var(--wcuf-muted); }
/* Themes style every <button> (background, padding, radius, height, shadow, uppercase...): on a tile that turned the
   picture into a small image in a coloured box, and the PDF "Preview" into a wide band. These buttons are the tile's
   own, so the theme's button style is undone on them - in every grid of tiles, the upload area's included. */
.wcuf-fgrid .wcuf-ftile button.wcuf-ftile__media { display: flex !important; width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; aspect-ratio: 4 / 3; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--wcuf-media) !important; box-shadow: none !important; color: inherit !important; line-height: 0 !important; text-transform: none !important; transform: none !important; overflow: hidden; }
.wcuf-fgrid .wcuf-ftile button.wcuf-ftile__media:hover, .wcuf-fgrid .wcuf-ftile button.wcuf-ftile__media:focus { background: var(--wcuf-media) !important; }
.wcuf-fgrid .wcuf-ftile .wcuf-ftile__preview { width: auto !important; height: 24px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 10px !important; margin: 0 !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; font-size: 11px !important; line-height: 24px !important; letter-spacing: normal !important; text-transform: none !important; }
.wcuf-fl button.wcuf-fmore { width: 100% !important; height: 100% !important; min-height: 96px !important; padding: 8px !important; margin: 0 !important; border: 1px dashed var(--wcuf-line) !important; border-radius: 8px !important; background: var(--wcuf-soft) !important; box-shadow: none !important; color: inherit !important; line-height: 1.3 !important; text-transform: none !important; }
.wcuf-fl button.wcuf-link { width: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: inherit !important; text-transform: none !important; }

/* The customer's note of a whole field, under its tiles */
.wcuf-fl__note { display: block; -webkit-line-clamp: unset; margin: 8px 0 0; font-size: .8125em; }
.wcuf-ftile__cost { display: inline-flex; align-items: center; height: 18px; margin-top: 4px; padding: 0 6px; border: 1px solid var(--wcuf-line); border-radius: 9px; background: var(--wcuf-soft); font-size: 10px; font-weight: 600; }
.wcuf-ftile__preview { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin: 0; border: 0; border-radius: 12px; background: var(--wcuf-btn-bg, currentColor); color: var(--wcuf-btn-fg, #FFFFFF); font: inherit; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; }
.wcuf-ftile--pdf .wcuf-badge { margin-bottom: 14%; }

/* Status on order pages (Premium approval) */
.wcuf-status { display: inline-flex; align-items: center; min-height: 18px; margin-top: 6px; padding: 2px 7px; border-radius: 9px; line-height: 1.25; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.wcuf-status--approved { background: color-mix(in srgb, var(--wcuf-ok) 16%, transparent); color: var(--wcuf-ok); }
.wcuf-status--pending { background: color-mix(in srgb, var(--wcuf-wait) 20%, transparent); color: var(--wcuf-wait); }
.wcuf-status--rejected { background: color-mix(in srgb, var(--wcuf-no) 16%, transparent); color: var(--wcuf-no); }
/* The state of a file's proof sent with Attach Me (Com\AttachMeProofs), a link to it: shaped like the approval state,
   with the weight against themes that style every link. */
.wcuf-ftile a.wcuf-proof { display: inline-flex; align-items: center; align-self: flex-start; min-height: 18px; margin-top: 6px; padding: 2px 7px; border: 0; border-radius: 9px; box-shadow: none; line-height: 1.25; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-decoration: none !important; }
.wcuf-ftile a.wcuf-proof:hover { text-decoration: underline !important; }
.wcuf-ftile a.wcuf-proof--waiting { background: color-mix(in srgb, var(--wcuf-wait) 20%, transparent); color: var(--wcuf-wait) !important; }
.wcuf-ftile a.wcuf-proof--approved { background: color-mix(in srgb, var(--wcuf-ok) 16%, transparent); color: var(--wcuf-ok) !important; }
.wcuf-ftile a.wcuf-proof--changes { background: color-mix(in srgb, var(--wcuf-no) 16%, transparent); color: var(--wcuf-no) !important; }
.wcuf-ftile__shopnote { font-style: normal; }

/* Actions on top of the preview (download on order pages, view/delete in the upload area) */
.wcuf-ftile__acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.wcuf-ftile__acts .wcuf-iconbtn, .wcuf-ftile__acts a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .58); color: #FFFFFF; opacity: 1; text-decoration: none; }
.wcuf-ftile__acts .wcuf-iconbtn:hover, .wcuf-ftile__acts a:hover { background: rgba(0, 0, 0, .78); }
.wcuf-ftile__acts .wcuf-ftile__dl { background: var(--wcuf-btn-bg, rgba(0, 0, 0, .58)); color: var(--wcuf-btn-fg, #FFFFFF); }
.wcuf-ftile__acts svg { width: 14px; height: 14px; }

/* "+N / Show all" tile and the collapsed state (JS toggles .is-expanded) */
.wcuf-fmore { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; min-height: 96px; padding: 8px; margin: 0; border: 1px dashed var(--wcuf-line); border-radius: 8px; background: var(--wcuf-soft); color: inherit; font: inherit; cursor: pointer; }
.wcuf-fmore b { font-size: 1.05em; }
.wcuf-fmore span { font-size: .72em; color: var(--wcuf-muted); }
.wcuf-fl:not(.is-expanded) .wcuf-ftile.is-extra { display: none; }
.wcuf-fl.is-expanded .wcuf-fmore-item { display: none; }
.wcuf-fl__less { margin-top: 8px; }
.wcuf-fl:not(.is-expanded) .wcuf-fl__less { display: none; }

/* ==========================================================================
   B · Uploads summary
   ========================================================================== */
.wcuf-sum { margin: 32px 0; padding: 20px 24px; border: 1px solid var(--wcuf-line); border-radius: 12px; background: var(--wcuf-soft); }
.wcuf-sum__title { margin: 0; font-size: 1.25em; line-height: 1.3; }
.wcuf-sum__sub { margin: 2px 0 0; font-size: .875em; color: var(--wcuf-muted); }
.wcuf-sum__product { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--wcuf-line); }
.wcuf-sum__product > h3 { margin: 0; font-size: 1em; line-height: 1.35; }
.wcuf-sum__totals { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid var(--wcuf-line); font-size: .9375em; }
.wcuf-sum__totals dt { display: inline; color: var(--wcuf-muted); font-weight: 400; }
.wcuf-sum__totals dd { display: inline; margin: 0 0 0 6px; font-weight: 700; }
@media (max-width: 600px) { .wcuf-sum { padding: 16px; } }

/* ==========================================================================
   C · Upload area
   ========================================================================== */
.wcuf-up { margin: 12px 0 0; padding: 18px; border: 1px solid var(--wcuf-line); border-radius: 12px; }
.wcuf-up + .wcuf-up { margin-top: 12px; }
.wcuf-up__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.wcuf-up__title { margin: 0; font-size: 1.05em; font-weight: 600; line-height: 1.35; }
.wcuf-up__req { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wcuf-muted); }
.wcuf-up__done { display: inline-flex; align-items: center; gap: 4px; font-size: .8em; font-weight: 600; color: var(--wcuf-ok); }
.wcuf-up__done svg { width: 14px; height: 14px; }
.wcuf-up__for { margin: 2px 0 0; font-size: .85em; color: var(--wcuf-muted); }
.wcuf-up__rules { margin: 2px 0 12px; font-size: .8em; color: var(--wcuf-muted); }

/* Drop zone: the whole box is the label of the real <input type="file"> */
.wcuf-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 16px; border: 1.5px dashed var(--wcuf-line); border-radius: 10px; background: var(--wcuf-soft); text-align: center; cursor: pointer; }
.wcuf-drop.is-dragover { border-style: solid; border-color: currentColor; }
.wcuf-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.wcuf-drop__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wcuf-media); }
.wcuf-drop__icon svg { width: 22px; height: 22px; }
.wcuf-drop__text { font-size: .9em; font-weight: 500; }
.wcuf-drop__choose { font-weight: 700; color: var(--wcuf-btn-bg, inherit); border-bottom: 2px solid currentColor; }
.wcuf-scheme-dark .wcuf-drop__choose { color: inherit; }
.wcuf-drop__hint { font-size: .78em; color: var(--wcuf-muted); }
.wcuf-drop--compact { flex-direction: row; gap: 10px; padding: 12px 16px; }
.wcuf-drop--compact svg { width: 18px; height: 18px; }

/* Selected files (before upload) */
ul.wcuf-sel { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
ul.wcuf-sel > li { margin: 0; list-style: none; }
.wcuf-selrow { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--wcuf-line); border-radius: 10px; background: var(--wcuf-tile); }
.wcuf-selrow__thumb { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; overflow: hidden; border-radius: 6px; background: var(--wcuf-media); }
.wcuf-selrow__thumb img { width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover; }
.wcuf-selrow__thumb .wcuf-badge { width: 30px; height: 36px; aspect-ratio: auto; padding-bottom: 4px; font-size: 9px; }
.wcuf-selrow__info { flex: 1 1 auto; min-width: 0; }
.wcuf-selrow__name { display: block; overflow: hidden; font-size: .85em; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.wcuf-selrow__meta { display: block; font-size: .78em; color: var(--wcuf-muted); }

/* Quantity stepper: wraps the plugin's existing <input type="number"> */
.wcuf-qty { display: inline-flex; align-items: center; height: 32px; flex: none; overflow: hidden; border: 1px solid var(--wcuf-line); border-radius: 6px; }
.wcuf-qty button { width: 28px; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.wcuf-qty input[type="number"] { width: 34px !important; height: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; color: inherit; font: inherit; font-size: 13px; font-weight: 600; text-align: center; box-shadow: none !important; -moz-appearance: textfield; }
.wcuf-qty input::-webkit-outer-spin-button, .wcuf-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wcuf-up__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.wcuf-addmore { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; min-height: 44px; padding: 0 14px; margin: 0; border: 1.5px dashed var(--wcuf-line); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: .875em; font-weight: 600; cursor: pointer; }

/* Uploading: one progress for the whole field; the selection is locked (as the plugin does today) */
.wcuf-progress { padding: 14px; border: 1px solid var(--wcuf-line); border-radius: 10px; background: var(--wcuf-tile); }
.wcuf-progress__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .9em; }
.wcuf-progress__track { height: 8px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: var(--wcuf-line); }
.wcuf-progress__bar { display: block; height: 100%; border-radius: 4px; background: var(--wcuf-btn-bg, currentColor); transition: width .2s; }
.wcuf-progress__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: .78em; color: var(--wcuf-muted); }
.wcuf-up.is-uploading .wcuf-drop, .wcuf-up.is-uploading .wcuf-up__actions { display: none; }
.wcuf-up.is-uploading .wcuf-sel { opacity: .45; filter: blur(1.5px); pointer-events: none; user-select: none; }

/* Single field, file uploaded */
.wcuf-one { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px; border: 1px solid var(--wcuf-line); border-radius: 10px; background: var(--wcuf-tile); }
.wcuf-one .wcuf-selrow__info { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) { .wcuf-progress__bar { transition: none; } }

/* ---------- C in the plugin's own markup (templates/upload-form/field.php, templates/order/field.php) ----------
   The scripts show these parts with jQuery (display: block): hidden until then, and laid out as blocks. */
.wcuf_upload_status_box, .wcuf-up .vanupfi_file_name, .wcuf-up__actions.wcuf_multiple_files_actions_button_container { display: none; }
.wcuf-up .wcuf-progress { margin-top: 12px; }
.wcuf-up .wcuf-progress__bar { width: 0; }
.wcuf-up .wcuf-up__title { margin: 0 !important; }
.wcuf-up .wcuf-up__for { margin: 2px 0 0; font-size: .85em; font-weight: 400; color: var(--wcuf-muted); }
.wcuf-up p.wcuf_field_description { margin: 6px 0 0; }
.wcuf-up p.wcuf_field_description:empty { display: none; }
.wcuf-up p.wcuf-up__rules { margin: 6px 0 12px; }
.wcuf-up .wcuf_upload_button_container { position: relative; }
.wcuf-up .wcuf_upload_button_container > .wcuf_upload_multiple_files_button { margin-top: 12px; }
.wcuf-up .wcuf_disclaimer_label { display: block; margin: 0 0 10px; }
.wcuf-drop:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.wcuf-drop.wcuf_dragover { border-style: solid; border-color: currentColor; }
.wcuf-up .wcuf-drop--compact { margin-top: 12px; }
/* The buttons over a tile's picture sit at its top: a type label there moves down, out from under them */
.wcuf-ftile__media:has(+ .wcuf-ftile__acts) .wcuf-badge { margin-top: 22px; }
/* The files chosen (a div the script fades in): rows one under the other */
.wcuf-up .wcuf-sel { margin: 12px 0 0; }
.wcuf-sel > .wcuf-selrow + .wcuf-selrow { margin-top: 6px; }
.wcuf-selrow.wcuf_mandatory_crop { border-color: var(--wcuf-no); }
.wcuf-selrow .wcuf_quantity_per_file_container { display: flex; flex: none; align-items: center; gap: 6px; }
.wcuf-selrow__thumb .wcuf_single_image_preview { width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover; }
.wcuf-up__actions.wcuf_multiple_files_actions_button_container > * + * { margin-left: 12px !important; }
/* The uploaded files: the message of the field (Uploaded files: [file_name_with_media_preview]) with the tiles in it */
.wcuf-up .wcuf_already_uploaded_data_container { margin-top: 12px; }
.wcuf-up .wcuf_already_uploaded_data_container :is(h1, h2, h3, h4, h5, h6) { margin: 0 !important; font-size: .875em !important; font-weight: 600; line-height: 1.35; }
.wcuf-up .wcuf_already_uploaded_data_container ul.wcuf-fgrid { margin-top: 8px; }
.wcuf_inside_product_table ul.wcuf-fgrid--m { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.wcuf-up__approval { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
.wcuf-up__approval .wcuf-status, .wcuf-up__approval .wcuf-ftile__shopnote { margin-top: 0; }
/* A cost can be long ("$0.50 (cost per upload) + $1.00 (size cost)") */
.wcuf-ftile__cost { height: auto; min-height: 18px; padding: 1px 6px; line-height: 1.35; white-space: normal; }
/* The theme's button style undone on the area's own buttons (see "Themes style every <button>" above). The upload
   buttons themselves keep the theme's look: they carry the theme's classes (button wp-element-button). */
.wcuf-up button.wcuf-btn--outline { width: auto !important; min-width: 0 !important; min-height: 36px !important; height: auto !important; padding: 0 14px !important; margin: 0 !important; border: 1px solid currentColor !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font-size: .875em !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: normal !important; }
.wcuf-up button.wcuf-btn--outline:hover { background: var(--wcuf-soft) !important; }
.wcuf-up button.wcuf-link { width: auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: inherit !important; text-decoration: underline !important; text-transform: none !important; }
.wcuf-up .wcuf-qty button { width: 28px !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: inherit !important; line-height: 1 !important; }
.wcuf-sel button.wcuf-iconbtn { width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: inherit !important; }
.wcuf-ftile__acts button.wcuf-iconbtn { width: 28px !important; height: 28px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 6px !important; background: rgba(0, 0, 0, .58) !important; box-shadow: none !important; color: #FFFFFF !important; opacity: 1; }
.wcuf-ftile__acts button.wcuf-iconbtn:hover { background: rgba(0, 0, 0, .78) !important; }
.wcuf-ftile__acts button.download_small_button { background: var(--wcuf-btn-bg, rgba(0, 0, 0, .58)) !important; color: var(--wcuf-btn-fg, #FFFFFF) !important; }

/* ==========================================================================
   L · Lightbox (images only; same behaviour as the admin order page)
   ========================================================================== */
.wcuf-lb { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 72px 24px; background: rgba(16, 20, 24, .9); font-family: inherit; }
.wcuf-lb[hidden] { display: none; }
.wcuf-lb__img { max-width: 100% !important; max-height: calc(100vh - 160px); object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); background: #FFFFFF; }
.wcuf-lb__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; color: #FFFFFF; font-size: 14px; }
.wcuf-lb__meta { color: rgba(255, 255, 255, .72); }
.wcuf-lb__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #FFFFFF; cursor: pointer; }
.wcuf-lb__btn:hover { background: rgba(255, 255, 255, .26); }
/* Same as the tile buttons: the theme's button style undone (see "Themes style every <button>" above) */
.wcuf-lb button.wcuf-lb__btn { width: 44px !important; height: 44px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .14) !important; box-shadow: none !important; color: #FFFFFF !important; line-height: 0 !important; }
.wcuf-lb button.wcuf-lb__btn:hover { background: rgba(255, 255, 255, .26) !important; }
.wcuf-lb__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.wcuf-lb__btn svg { width: 22px; height: 22px; }
.wcuf-lb__close { top: 12px; right: 12px; }
.wcuf-lb__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.wcuf-lb__next { right: 16px; top: 50%; transform: translateY(-50%); }
.wcuf-lb.is-single .wcuf-lb__prev, .wcuf-lb.is-single .wcuf-lb__next { display: none; }
[dir="rtl"] .wcuf-lb__prev { left: auto; right: 16px; }
[dir="rtl"] .wcuf-lb__next { right: auto; left: 16px; }
[dir="rtl"] .wcuf-ftile__acts { right: auto; left: 6px; }
[dir="rtl"] .wcuf-ftile__note { padding-left: 0; padding-right: 6px; border-left: 0; border-right: 2px solid var(--wcuf-line); }
@media (max-width: 600px) { .wcuf-lb { padding: 56px 12px 16px; } .wcuf-lb__prev, .wcuf-lb__next { top: auto; bottom: 16px; transform: none; } }

[hidden].wcuf-fl__less, .wcuf-iconbtn[hidden], .wcuf-lb__dl[hidden] { display: none !important; }