/**
 * VendorPlus core styles — part 7 of 10: Submission form, photo slots and queue panel
 *
 * Split from the single 18,135-line vendor-plus.css. The parts are chained as
 * style dependencies and MUST load in numeric order: rules here are overridden
 * by later parts, and 173 selector pairs in this sheet set the same property
 * twice. Reordering the parts changes computed styles.
 *
 * Do not reorder rules between parts. To verify the split is still faithful:
 *     php vendorplus-core/tests/stylesheet-split-guard-test.php
 *
 * Lines 12206-14324 of the original file.
 */

/* ============================================
   Submission Form Photo Uploader
   ============================================ */

/* Container for submission photos - grid layout */
#vplus-photo-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 0.875rem;
  margin-top: 0.5rem;
}

/* Individual photo container */
#vplus-photo-files .vplus-file-container {
  position: relative;
  aspect-ratio: 1;
  overflow: visible;
}

/* Image box wrapper */
#vplus-photo-files .image-box {
  width: 100%;
  height: 100%;
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: #f8f9fa;
}

/* Photo span with background-image */
#vplus-photo-files .image-box .photo {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#vplus-photo-files .image-box .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Move handle */
#vplus-photo-files .vplus-file-move-handle {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  cursor: grab;
  z-index: 10;
  border: none;
}

#vplus-photo-files .vplus-file-move-handle:active {
  cursor: grabbing;
}

/* Selected state */
#vplus-photo-files .vplus-file-container.selected .image-box {
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.4);
  border-color: var(--bs-primary);
}

#vplus-photo-files .vplus-file-container.selected .image-box .photo {
  opacity: 0.85;
}

/* Additional photos (submission form)

   P2 — this gallery renders ONLY when the AI Prompts section is enabled (the
   prompts-off branch renders #vplus-photo-files instead, and the two are
   mutually exclusive). It never received the intrinsic grid rule its sibling
   above has, so it fell through to the base .vplus-media-files
   `repeat(8, 1fr)`. Two consequences, both measured live:

     1. Media queries track the VIEWPORT, but this gallery sits inside the extra
        #vplus-photo-sections / .vplus-photo-section-group nesting, so the
        CONTAINER is much narrower than the viewport implies — 8 fixed tracks in
        a 390px container computed to 30.5px tiles.
     2. At 430px the tracks were 102px while the .vplus-media-option overlay row
        needed 132px (4 x 44px buttons), and .vplus-file-container is
        `overflow: visible` (load-bearing — the delete-confirm popover must
        escape the tile), so the buttons painted ~31px OUTSIDE the card.

   auto-fill/minmax sizes from the container instead, matching the
   #vplus-photo-files rule above and photo-app-shell.css. */
#vplus-photo-files-additional {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.875rem;
}
#vplus-photo-files-additional .vplus-file-container.photo-file {
  position: relative;
  aspect-ratio: 1;
}

/* ============================================================
   PHOTO APP — synced-lot dropdown badges.
   The photo-state badge reuses the lot list's .vplus-sync-status-badge
   family; its colours live in archive-lot.php's inline CSS, which the
   Photo App page never loads, so the family is (re)declared here for
   the select2 dropdown + selection contexts. --no-photos is new and
   photo-app-only. The selected-by badge shows who currently holds the
   lot's edit lock (data fetched fresh on dropdown open).
   ============================================================ */
.vplus-photo-state-badge,
.vplus-selected-by-badge {
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  vertical-align: baseline;
  white-space: nowrap;
}
.vplus-photo-state-badge {
  color: #fff;
  border: 1px solid transparent;
}
.vplus-photo-state-badge .vplus-sync-status-text {
  font-weight: 500;
}
.vplus-photo-state-badge.vplus-sync-status-badge--unsynced {
  background-color: #212529;
}
.vplus-photo-state-badge.vplus-sync-status-badge--queued {
  background-color: #0d6efd;
}
.vplus-photo-state-badge.vplus-sync-status-badge--synced {
  background-color: #198754;
}
.vplus-photo-state-badge.vplus-sync-status-badge--no-photos {
  background-color: #6c757d;
}
.vplus-selected-by-badge {
  background-color: #cfe2ff;
  color: #084298;
}
/* Badges sit at the row's right edge, title text keeps the left. */
.select2-results__option .vplus-lot-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.select2-results__option .vplus-lot-option .vplus-photo-state-badge {
  margin-left: auto;
}

/* Legacy notice tip beside the Photo App heading. */
.vplus-photo-app-legacy-tip {
  color: #6c757d;
  font-size: 1.05rem;
  vertical-align: middle;
  cursor: help;
}
.vplus-photo-app-legacy-tip:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
  border-radius: 50%;
}
/* The lot dropdown is a vplus-ss widget now, not select2 — same right-edge
   badge alignment inside its items. */
.vplus-ss-item .vplus-lot-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.vplus-ss-item .vplus-lot-option .vplus-photo-state-badge {
  margin-left: auto;
}

/* Exception to the global .vplus-ss-trigger .vplus-badge hide (written for
   the item-nav select, where badges fight the trigger's ellipsis): on the
   Photo App the photo-state badge IS the point of the selection display.
   3-class selector so cascade order never decides. */
.vplus-ss-trigger .vplus-ss-display .vplus-photo-state-badge {
  display: inline-flex;
  flex: 0 0 auto;
  vertical-align: middle;
}
#vplus-photo-files-additional .image-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--bs-border-radius-sm);
}
#vplus-photo-files-additional .image-box .photo {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Featured image icon - positioned on vplus-file-container (not image-box) */
#vplus-photo-files .vplus-featured-image-icon,
#vplus-photo-files-additional .vplus-featured-image-icon {
  position: absolute;
  z-index: 100;
  color: #ffa500;
  font-size: 1.25rem;
  bottom: calc(100% - 0.5rem);
  line-height: 1rem;
  left: -0.25rem;
  transform: rotate(-15deg);
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

#vplus-photo-files .vplus-primary-photo-label,
#vplus-photo-files-additional .vplus-primary-photo-label {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.2;
  pointer-events: none;
}

/* AI file marker icon */
#vplus-photo-files .vplus-ai-file-icon {
  display: flex;
  position: absolute;
  color: var(--bs-primary);
  z-index: 100;
  font-size: 0.875rem;
  bottom: calc(100% - 0.75rem);
  line-height: 1rem;
  right: -0.25rem;
  border: 1px solid var(--bs-primary);
  border-radius: 50%;
  background: #fff;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

/* Processed ("Edited") badge on a lot-form photo tile. The base
   .vplus-processed-badge sits top-right (top/right: -0.35rem) — the SAME corner
   as the AI icon above, so the two overlap. Keep the AI icon exactly where users
   expect it (top-right corner) and tuck the processed badge immediately to its
   LEFT, aligned to the same top edge, so they read as a neat side-by-side row.
   The AI icon is a 1.5rem circle at right:-0.25rem (so its left edge is at
   right:1.25rem); placing this badge at right:1.4rem clears it with a small gap.
   Scoped to #vplus-photo-files (the lot form) so the submission uploader's badge
   layout is untouched. */
#vplus-photo-files .vplus-processed-badge {
  bottom: calc(100% - 0.75rem);
  top: auto;
  right: 1.4rem;
}

/* Progress bar */
#vplus-photo-files .progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  border-radius: 0 0 2px 2px;
  background: rgba(0, 0, 0, 0.15);
}

#vplus-photo-files .progress-bar {
  transition: width 0.3s ease;
}

/* Media options panel for the submission photo uploader.

   IMPORTANT: these are id-scoped and late in the file, so they beat the base
   .vplus-media-option rules (~line 1584) on this page — the submission form is
   the ONE place the panel actually renders. Anything changed in the base block
   must be mirrored here or it silently has no effect. */
#vplus-photo-files .vplus-media-option {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% - 0.5rem);
}
#vplus-photo-files .vplus-media-option.show {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--vplus-primary, #1c3f85);
  border-radius: var(--bs-border-radius, 0.375rem);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  bottom: calc(100% + 0.5rem);
  padding: 0.5rem;
}
#vplus-photo-files .vplus-media-option:before {
  border-color: var(--vplus-primary, #1c3f85) transparent transparent
    transparent;
}
#vplus-photo-files .vplus-media-option:after {
  border-color: #fff transparent transparent transparent;
}
/* Labelled buttons keep their Bootstrap outline variant — the old flat #555
   colour rule fought btn-outline-danger on Delete. */
#vplus-photo-files .vplus-media-option .btn {
  padding: 0.3rem 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.2;
}
#vplus-photo-files .vplus-media-option .ai-link:hover {
  color: var(--bs-info);
}
/* ================================================================
   Consignment Prompt Button Grid
   ================================================================ */
.vplus-consignment-prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.vplus-prompt-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  color: #495057;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.8rem;
  text-align: center;
  min-height: 56px;
}
.vplus-prompt-btn i {
  font-size: 1.3rem;
}
.vplus-prompt-btn:hover {
  border-color: var(--bs-warning);
  background: #fff9e6;
  color: #333;
}
.vplus-prompt-btn.active {
  border-color: var(--bs-warning);
  background: var(--bs-warning);
  color: #000;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(255, 193, 7, 0.35);
}
.vplus-prompt-btn-add {
  border-style: dashed;
  color: #6c757d;
}
.vplus-prompt-btn-add:hover {
  border-color: var(--bs-primary);
  background: rgba(13, 110, 253, 0.05);
  color: var(--bs-primary);
}

/* ================================================================
   Express Mode Templates picker ("Just Lot the damn thing")
   Buttons extend the .vplus-prompt-btn vocabulary: icon → label → a
   compact 2-column field list. Gold-accent active/hover to match.
   ================================================================ */
.vplus-express-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.vplus-express-template-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  color: #495057;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  text-align: center;
}
.vplus-express-template-btn:hover {
  border-color: var(--bs-warning);
  background: #fff9e6;
  color: #333;
}
.vplus-express-template-btn.active {
  border-color: var(--bs-warning);
  background: #fffdf5;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
  color: #333;
}
.vplus-express-template-btn__icon {
  font-size: 1.6rem;
  color: #b8860b;
}
.vplus-express-template-btn.active .vplus-express-template-btn__icon {
  color: var(--bs-warning);
}
.vplus-express-template-btn__label {
  font-weight: 600;
  font-size: 0.95rem;
}
.vplus-express-template-btn__note {
  color: #6c757d;
}
.vplus-express-template-btn__fields {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* align-items:start so a cell that wraps to two lines pushes its row down
     instead of overlapping the neighbouring cell; wider row gap gives wrapped
     items breathing room. */
  align-items: start;
  gap: 5px 10px;
  font-size: 0.75rem;
  color: #667085;
  text-align: left;
}
.vplus-express-template-btn__fields li {
  position: relative;
  padding-left: 10px;
  line-height: 1.3;
  /* Keep continuation lines aligned under the label (not under the bullet) so a
     long label like "Auto Lot Numbering" reads cleanly if it does wrap. */
  text-indent: 0;
  hyphens: none;
}
.vplus-express-template-btn__fields li::before {
  content: "\2022"; /* • */
  position: absolute;
  left: 0;
  color: #b8860b;
}
.vplus-express-template-btn__fields-note {
  grid-column: 1 / -1;
  font-style: italic;
  color: #98a2b3;
}
.vplus-express-template-btn__fields-note::before {
  content: none !important;
}
/* Express Mode Template walkthrough video (VendorPlus Learn). The responsive
   swap + chrome suppression live in the Learn plugin's own stylesheet; this
   only frames the wrapper to match the surrounding info box. */
.vplus-express-template-video {
  margin-top: 8px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
}

/* ================================================================
   Section-Based Photo Upload Slots (Multi-Photo)
   ================================================================ */
.vplus-photo-section-group {
  margin-bottom: 16px;
}
.vplus-section-group-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.vplus-photo-section-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.vplus-photo-section-slot {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 8px;
  background: #fafbfc;
  transition: border-color 0.15s ease;
}
.vplus-photo-section-slot:hover {
  border-color: #adb5bd;
}
.vplus-section-slot-header {
  margin-bottom: 6px;
}
.vplus-section-slot-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #495057;
}
.vplus-section-slot-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 0;
}
.vplus-section-thumb {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.vplus-section-thumb .photo {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.vplus-section-thumb.uploading {
  opacity: 1;
}
.vplus-section-thumb.uploading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.vplus-section-thumb .vplus-upload-progress {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
}
.vplus-section-thumb .vplus-upload-progress .progress {
  width: 80%;
  height: 12px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  margin-top: 4px;
}
.vplus-section-thumb .vplus-upload-progress .progress-bar {
  background: #fff;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.vplus-section-thumb-remove {
  position: absolute;
  top: 4px;
  /* Top-LEFT so it doesn't collide with the always-visible AI toggle (top-right). */
  left: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 0;
  line-height: 1;
}
.vplus-section-thumb:hover .vplus-section-thumb-remove {
  opacity: 1;
}
.vplus-section-thumb .vplus-ai-file-icon {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--bs-warning);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 0.6rem;
}

.vplus-section-add-photo {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  border: 1px dashed #ced4da;
  border-radius: 4px;
  background: transparent;
  color: #6c757d;
  font-size: 0.7rem;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  justify-content: center;
}
.vplus-section-add-photo:hover {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  background: #f0f6ff;
}

/* Additional photos section */
.vplus-photo-section-additional {
  border-top: 1px solid #dee2e6;
  padding-top: 12px;
  margin-top: 4px;
}

/* ================================================================
   Condition Report Image Upload
   ================================================================ */
.vplus-cr-fields-grid {
  align-items: stretch;
}
.vplus-cr-field-cell > .form-floating,
.vplus-cr-field-cell > .small,
.vplus-cr-field-cell > .vplus-cr-address-field {
  min-width: 0;
}
.vplus-cr-field-cell .btn-group {
  flex-wrap: wrap;
}
.vplus-cr-field-cell .btn-group > .btn {
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  margin: 0 0.25rem 0.25rem 0;
}
.vplus-cr-image-upload-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.vplus-cr-image-upload,
.vplus-cr-photo-select {
  white-space: nowrap;
}
.vplus-cr-image-upload.btn,
.vplus-cr-image-upload.btn-outline-secondary {
  color: #fff !important;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}
.vplus-cr-image-upload.btn:hover,
.vplus-cr-image-upload.btn-outline-secondary:hover,
.vplus-cr-image-upload.btn:focus,
.vplus-cr-image-upload.btn-outline-secondary:focus {
  color: #fff !important;
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}
.vplus-cr-image-upload.btn:active,
.vplus-cr-image-upload.btn-outline-secondary:active,
.vplus-cr-image-upload.btn.show,
.vplus-cr-image-upload.btn-outline-secondary.show {
  color: #fff !important;
  background-color: #0a58ca !important;
  border-color: #0a53be !important;
}
.vplus-cr-image-upload:hover,
.vplus-cr-photo-select:hover {
  border-color: var(--bs-primary);
}
.vplus-cr-image-previews {
  width: 100%;
}
.vplus-cr-image-thumb {
  position: relative;
  width: 88px;
  min-height: 112px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  padding: 4px;
  background: var(--bs-body-bg, #fff);
}
.vplus-cr-image-thumb .photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: calc(var(--bs-border-radius, 0.375rem) - 2px);
  background-position: center;
  background-size: cover;
}
.vplus-cr-image-thumb .vplus-cr-image-remove {
  width: 100%;
  margin-top: 4px;
}
.vplus-cr-image-preview {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vplus-cr-image-remove {
  padding: 0 4px;
  font-size: 0.8rem;
}

/* CR Field Tooltip — info card */
.vplus-cr-tooltip {
  background: var(--bs-info-bg-subtle, #cff4fc);
  border-left: 3px solid var(--bs-info, #0dcaf0);
  border-radius: 0 4px 4px 0;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: #055160;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

/* ================================================================
   Submission Form — Minimum font sizes & colour overrides
   ================================================================ */
.vplus-vendor-submission-form {
  font-size: 16px;
}
.vplus-vendor-submission-form .form-label,
.vplus-vendor-submission-form label {
  font-size: 16px;
}
.vplus-vendor-submission-form .form-control,
.vplus-vendor-submission-form .form-select,
.vplus-vendor-submission-form .form-control-sm {
  font-size: 16px;
}
.vplus-vendor-submission-form .form-text,
.vplus-vendor-submission-form .text-muted {
  font-size: 14px;
  color: #495057 !important;
}
.vplus-vendor-submission-form .badge {
  font-size: 12px;
}
.vplus-vendor-submission-form .small,
.vplus-vendor-submission-form small {
  font-size: 14px;
}
.vplus-vendor-submission-form .btn {
  font-size: 16px;
}
/* Stronger required asterisks */
.vplus-vendor-submission-form .text-danger,
.vplus-vendor-submission-form sup {
  color: #b91c1c !important;
}
/* Darker warning badges */
.vplus-vendor-submission-form .badge.bg-warning {
  background-color: #d4a017 !important;
}
/* text-indigo utility (used on CR icon) */
.vplus-vendor-submission-form .text-indigo {
  color: #6610f2 !important;
}
/* The Analyse Photos button (#vplus-ai-generate) is the explicit trigger for AI
   Analysis on the submission form — it must be VISIBLE. (It was previously hidden
   here because analysis auto-ran on upload; that behaviour is gone — analysis now
   runs only on this button.) The button is enabled/disabled by selection in JS. */
/* Labels set to black for better visibility (placeholders use default grey for floating-label compat) */
.vplus-vendor-submission-form .form-floating > label {
  color: #000000;
}

body.vplus-dark-mode .vplus-vendor-submission-form .form-text,
.vplus-vendor-submission-form .text-muted {
  font-size: 14px;
  color: #cbcbcb;
}

/* ================================================================
   Submission Queue Panel & FAB
   ================================================================ */
/* Fab rail — the single owner of the bottom-right corner. Anything else that
   wants that corner (the AI chat launcher) joins the rail as a child rather
   than stacking on top of the queue fab. column-reverse so newly prepended
   fabs rise above the ones already there. */
.vplus-fab-rail {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10001;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
  /* The rail spans only its children; the gaps between them stay click-through
     so it never swallows clicks meant for the page beneath. */
  pointer-events: none;
}
.vplus-fab-rail > * {
  pointer-events: auto;
}

/* The AI chat docks against the right edge and makes room for itself by
   squeezing normal flow (a margin on <body>). The rail is position:fixed, so
   the squeeze does not move it — and at z-index 10001 against the panel's
   1100 it renders ON TOP of the chat, over the message input. The island's own
   stylesheet documents this and expects the host to offset its fixed elements.

   --wac-dock-width is published on <body> by the chat for exactly this. The
   fallback matches its default panel width. */
body.ai-chat-docked .vplus-fab-rail {
  right: calc(20px + var(--wac-dock-width, 420px));
  transition: right 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Docked to the left instead: the right-hand corner is free again. */
body.ai-chat-docked.ai-chat-docked--left .vplus-fab-rail {
  right: 20px;
}

/* Must match the island's own breakpoint. Below it the chat stops squeezing the
   page and covers it as a full-width overlay, so there is nothing left to sit
   beside — offsetting the rail would push it off-screen instead. */
@media (max-width: 900px) {
  body.ai-chat-docked .vplus-fab-rail {
    display: none;
  }
}

/* ================================================================
   Checklist fab (vendor-plus-checklist-fab.js)
   A floating presenter for a checklist verdict. Joins .vplus-fab-rail,
   so it never positions itself — the rail owns the corner and the
   stacking order between the queue fab, the chat launcher and this.
   ================================================================ */
.vplus-checklist-fab-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.vplus-checklist-fab {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--vplus-primary, #1c3f85);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.vplus-checklist-fab:hover {
  transform: scale(1.08);
}

.vplus-checklist-fab__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--bs-warning, #ffc107);
  color: #1d1d1d;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vplus-checklist-fab-panel {
  width: min(320px, calc(100vw - 32px));
  max-height: min(60vh, 420px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vplus-checklist-fab-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: #1d1d1d;
  color: #fff;
}

.vplus-checklist-fab-panel__title {
  font-weight: 600;
  font-size: 0.9rem;
}

.vplus-checklist-fab-panel__close {
  background: transparent;
  border: 0;
  color: #fff;
  padding: 0.1rem 0.3rem;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}

.vplus-checklist-fab-panel__close:hover,
.vplus-checklist-fab-panel__close:focus-visible {
  opacity: 1;
}

.vplus-checklist-fab-panel__list {
  overflow-y: auto;
  padding: 0.35rem 0;
}

.vplus-checklist-fab-panel__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  color: #212529;
  cursor: pointer;
}

.vplus-checklist-fab-panel__item:hover,
.vplus-checklist-fab-panel__item:focus-visible {
  background: rgba(0, 0, 0, 0.04);
}

.vplus-checklist-fab-panel__item i {
  color: #b8860b;
  font-size: 0.8rem;
}

.vplus-checklist-fab-panel__empty {
  margin: 0;
  padding: 1rem 0.85rem;
  text-align: center;
  font-size: 0.85rem;
  color: #6c757d;
}

/* Completed rows (showCompleted). Muted + struck so the eye lands on what is
   still outstanding; they stay clickable, since jumping to a filled field to
   review it is legitimate. */
.vplus-checklist-fab-panel__item[data-vplus-fab-state="done"] {
  color: #8a939c;
}

.vplus-checklist-fab-panel__item[data-vplus-fab-state="done"] span {
  text-decoration: line-through;
}

.vplus-checklist-fab-panel__item[data-vplus-fab-state="done"] i {
  color: #4a9d5f;
}

.vplus-checklist-fab-panel__hint {
  margin: 0;
  padding: 0.5rem 0.85rem 0.35rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #6c757d;
}

/* Section heading — one per subject (a Vendor Profile) when the checklist
   spans more than one. Not a button: it groups, it does not navigate. The
   rows beneath it indent so the grouping reads without a divider on every
   row. */
.vplus-checklist-fab-panel__section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #495057;
}

.vplus-checklist-fab-panel__section + .vplus-checklist-fab-panel__item {
  padding-top: 0.35rem;
}

.vplus-checklist-fab-panel__section i {
  color: #b8860b;
  font-size: 0.8rem;
}

/* A section whose rows are all met: ticked and muted, matching the row rule
   above so a finished profile reads as finished at a glance. */
.vplus-checklist-fab-panel__section[data-vplus-fab-state="done"] {
  color: #8a939c;
}

.vplus-checklist-fab-panel__section[data-vplus-fab-state="done"] i {
  color: #4a9d5f;
}

.vplus-checklist-fab-panel__item[data-vplus-fab-grouped] {
  padding-left: 1.65rem;
}

body.vplus-dark-mode .vplus-checklist-fab-panel__section {
  color: #ced4da;
}

body.vplus-dark-mode
  .vplus-checklist-fab-panel__section[data-vplus-fab-state="done"] {
  color: #868e96;
}

body.vplus-dark-mode .vplus-checklist-fab-panel {
  background: #26292d;
  color: #e9ecef;
}

body.vplus-dark-mode .vplus-checklist-fab-panel__item {
  color: #e9ecef;
}

body.vplus-dark-mode .vplus-checklist-fab-panel__item:hover,
body.vplus-dark-mode .vplus-checklist-fab-panel__item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

body.vplus-dark-mode
  .vplus-checklist-fab-panel__item[data-vplus-fab-state="done"] {
  color: #9aa3ad;
}

body.vplus-dark-mode .vplus-checklist-fab-panel__hint {
  color: #a9b1bd;
}

@media (prefers-reduced-motion: reduce) {
  .vplus-checklist-fab {
    transition: none;
  }
  .vplus-checklist-fab:hover {
    transform: none;
  }
}

.vplus-queue-panel {
  position: fixed;
  bottom: 84px;
  right: 20px;
  /* Was a fixed 340px, which overflowed a 390px phone once padding was
     counted. Bounded by the viewport at small widths, wider than before on
     desktop so full titles have room. */
  width: min(420px, calc(100vw - 32px));
  max-height: min(78vh, 640px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vplus-queue-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--vplus-primary, #1c3f85);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.vplus-queue-panel-body {
  flex: 1;
  overflow-y: auto;
  /* The panel's own max-height bounds the column; a second fixed cap here
     just wasted space on tall screens. */
  min-height: 0;
}
/* Refusal reasons render here, inside the panel. The page-level message
   container sits below the form actions — thousands of pixels below the fold
   on a long form, so a refusal was invisible exactly when it mattered. */
.vplus-queue-panel-messages:not(:empty) {
  padding: 10px 12px 0;
}
.vplus-queue-panel-messages .alert {
  margin-bottom: 0;
  font-size: 12.5px;
  padding: 8px 30px 8px 10px;
}
.vplus-queue-panel-messages .btn-close {
  padding: 10px;
}
.vplus-queue-panel-footer {
  padding: 10px 14px;
  border-top: 1px solid #eee;
}
.vplus-queue-item {
  border-bottom: 1px solid #f0f0f0;
}
.vplus-queue-item:last-child {
  border-bottom: none;
}
.vplus-queue-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
}
/* Own row beneath the readiness detail, so both actions can carry a written
   label instead of being unlabelled icons crowded against the title. */
.vplus-queue-item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 14px 10px 64px;
}
.vplus-queue-item-actions .btn {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}
/* Full title over two lines. The panel is the only place a queued item is
   identified, and single-line truncation hid the part that distinguishes one
   consignment from the next. */
.vplus-queue-item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.vplus-queue-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
/* Readiness badge — a button, because it expands the field list below it. */
.vplus-queue-ready-badge {
  display: inline-flex;
  align-items: center;
  border: none;
  cursor: pointer;
  font-size: 10.5px;
  line-height: 1;
  padding: 4px 7px;
}
.vplus-queue-ready-badge:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 1px;
}
/* Rendered when a row carries no readiness rows: a plain status pill, so it
   must not invite a click it cannot answer. */
.vplus-queue-ready-badge--static {
  cursor: default;
}
/* The chevron is the affordance: without it the badge reads as a status pill
   rather than something that opens. Points down when closed, up when open. */
.vplus-queue-ready-badge__chevron {
  margin-left: 5px;
  font-size: 9px;
  transition: transform 0.15s ease;
}
.vplus-queue-ready-badge[aria-expanded="true"]
  .vplus-queue-ready-badge__chevron {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .vplus-queue-ready-badge__chevron {
    transition: none;
  }
}
/* Reduced bottom padding: the actions row directly below supplies the rest of
   the closing gap, and two full paddings left a hole under the field list.
   Left inset aligns the list with the title, clearing the thumbnail. */
.vplus-queue-item-detail {
  padding: 0 14px 8px 64px;
}
.vplus-queue-req-list {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  background: #f8f9fa;
  border-radius: 6px;
}
.vplus-queue-req {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  line-height: 1.5;
  color: #344054;
}
.vplus-queue-req__icon {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1.5;
}
.vplus-queue-req[data-vplus-req-state="done"] .vplus-queue-req__icon {
  color: #198754;
}
.vplus-queue-req[data-vplus-req-state="done"] .vplus-queue-req__label {
  color: #667085;
}
.vplus-queue-req[data-vplus-req-state="todo"] .vplus-queue-req__icon {
  color: #dc3545;
}
/* Rows the server named when it refused Submit All. The alert above the queue
   lists them too; this marks them in the list itself, which stays on screen
   after the alert is dismissed. Left border + tint rather than colour alone,
   so the state does not rely on colour perception. */
.vplus-queue-item--blocked {
  border-left: 3px solid #dc3545;
  background-color: #fdf2f3;
}
.vplus-queue-item-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vplus-queue-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vplus-queue-item-info {
  flex: 1;
  min-width: 0;
}
/* Positioned by .vplus-fab-rail, not by itself — the rail owns the corner. */
.vplus-queue-fab {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--vplus-primary, #1c3f85);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vplus-queue-fab:hover {
  transform: scale(1.08);
}
.vplus-queue-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--bs-danger, #dc3545);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================================================
   BLUEFLAG – Gold glow animation during AI lookup
   ================================================================ */
@keyframes vplus-glow-pulse {
  0% {
    box-shadow:
      0 0 4px rgba(218, 165, 32, 0.4),
      0 0 8px rgba(218, 165, 32, 0.2);
  }
  50% {
    box-shadow:
      0 0 10px rgba(218, 165, 32, 0.7),
      0 0 20px rgba(218, 165, 32, 0.35);
  }
  100% {
    box-shadow:
      0 0 4px rgba(218, 165, 32, 0.4),
      0 0 8px rgba(218, 165, 32, 0.2);
  }
}
.vplus-blueflag-loading .form-control,
.vplus-blueflag-loading .form-select {
  border-color: goldenrod;
  animation: vplus-glow-pulse 1.6s ease-in-out infinite;
}
.vplus-blueflag-status {
  font-size: 0.82rem;
  color: goldenrod;
  font-weight: 600;
  margin-top: 4px;
}
.vplus-blueflag-status .fa-spinner-third {
  margin-right: 5px;
}

/* vendor-submission-form */
.vendor-submission-form .btn-group:has([type="radio"]) .btn {
  padding: 0.75rem 2rem;
  background: var(--bs-white);
  color: var(--bs-primary);
}
.vendor-submission-form
  .btn-group:has([type="radio"])
  .btn-check:checked
  + .btn {
  background: var(--bs-primary);
  color: var(--bs-white);
}

/* ==========================================
   MOBILE & TABLET RESPONSIVENESS v2.1
   ========================================== */

@media (max-width: 767px) {
  /* --------------------------------------
     A4. Bulk Import button label visibility
     -------------------------------------- */
  .vplus-lot-nav .vplus-bulk-actions .btn .btn-link-label {
    display: inline !important;
  }

  /* --------------------------------------
     A3. Sale meta sizing & centering
     -------------------------------------- */
  .vplus-sale-meta {
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.95rem;
  }

  /* --------------------------------------
     A5. AI Descriptron toggle scale-up
     -------------------------------------- */
  #vplus-card--ai .vplus-ai-toggle-row {
    gap: 0.75rem;
  }
  #vplus-card--ai .vplus-ai-toggle-row h5 {
    font-size: 1.15rem;
  }
  #vplus-card--ai .vplus-ai-toggle-row .form-check-input {
    width: 3em;
    height: 1.5em;
  }

  /* --------------------------------------
     A6. Express btn-groups: stack vertically
     -------------------------------------- */
  #express-lot-type-row .btn-group,
  #express-purchase-option-row .btn-group,
  #lot-type-row .btn-group,
  #purchase-option-row .btn-group {
    flex-direction: column;
  }
  #express-lot-type-row .btn-group .btn,
  #express-purchase-option-row .btn-group .btn,
  #lot-type-row .btn-group .btn,
  #purchase-option-row .btn-group .btn {
    border-radius: var(--bs-border-radius) !important;
    border: 1px solid var(--bs-border-color) !important;
    margin-top: -1px;
  }
  #express-lot-type-row .btn-group .btn:first-of-type,
  #express-purchase-option-row .btn-group .btn:first-of-type,
  #lot-type-row .btn-group .btn:first-of-type,
  #purchase-option-row .btn-group .btn:first-of-type {
    margin-top: 0;
  }
  #express-lot-type-row .btn-group .btn-check:checked + .btn,
  #express-purchase-option-row .btn-group .btn-check:checked + .btn,
  #lot-type-row .btn-group .btn-check:checked + .btn,
  #purchase-option-row .btn-group .btn-check:checked + .btn {
    z-index: 1;
    border-color: var(--bs-dark) !important;
  }

  /* --------------------------------------
     A7. Express price fields: single column
     -------------------------------------- */
  #express-purchase-price-row,
  #express-opening-bid-row,
  #express-bid-increment-row,
  #express-reserve-row,
  #express-quantity-row,
  #express-auto-reject-offers-row,
  #express-soft-minimum-offer-row,
  #express-minimum-offer-row {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* --------------------------------------
     A8. Show form-row-separators on mobile
     -------------------------------------- */
  .vplus-express-mode .form-row-separator {
    display: block !important;
  }

  /* --------------------------------------
     A9. Format Numbers wrap on mobile
     -------------------------------------- */
  #vp-currency-format-row,
  #express-currency-format-row {
    flex-wrap: wrap;
  }
  #vp-currency-format-row > *,
  #express-currency-format-row > * {
    flex: 0 0 auto;
  }
  #vp-currency-format-row > .vr,
  #express-currency-format-row > .vr {
    display: none;
  }
  #vp-currency-format-row > small,
  #express-currency-format-row > small {
    flex: 0 0 100%;
    margin-top: 0.25rem;
  }

  /* --------------------------------------
     A10. Buyer's Premium fields: single column
     -------------------------------------- */
  #vplus-card--tax-details .row > .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* --------------------------------------
     A12. Consignment tabs: center + wrap
     -------------------------------------- */
  .vplus-submissions-tabs {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .vplus-submissions-tabs .nav-link {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }

  /* --------------------------------------
     A12b. Auction Manager top tabs: stack
     full-width on mobile so each option has
     a generous tap target instead of squeezing
     three labels into a horizontal btn-group.
     Mirrors the .btn-group.w-100 stack used by
     #express-purchase-option-row on content-lot.
     -------------------------------------- */
  #auctionManagerTabs.btn-group {
    flex-direction: column;
    width: 100%;
  }
  #auctionManagerTabs.btn-group > .btn {
    border-radius: 0;
    border-right-width: 1px;
  }
  #auctionManagerTabs.btn-group > .btn + .btn {
    margin-left: 0;
    margin-top: -1px; /* collapse double borders */
  }
  #auctionManagerTabs.btn-group > .btn:first-child {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
  }
  #auctionManagerTabs.btn-group > .btn:last-child {
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
  }

  /* --------------------------------------
     A14. Filter button row spacing
     -------------------------------------- */
  /* AM7.4 — :not(.vp-filter__select) is load-bearing. These rules predate the
     filter-panel work and target .col-12.col-md-auto generically, but inside
     the panel the ONLY elements matching that are .vp-filter__select and
     .vp-filter__actions. Carrying an id (or an attribute selector) they
     out-specify the panel's own fold-away at :5081, so below 768px they forced
     the promoted selects back into view — Per Page REAPPEARED as the viewport
     narrowed past 767, taking the sales search field from 425px to 182px and
     growing the panel 126px to 194px. The actions cluster still needs the flex
     layout below, so only the selects are excluded. */
  #vplus-sale-filter .col-12.col-md-auto:not(.vp-filter__select) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  #vplus-sale-filter .col-12.col-md-auto .btn {
    flex: 1 1 auto;
  }
  #vplus-import-auction-btn {
    flex: 0 0 100%;
  }

  /* Archive-lot filter buttons */
  form[action=""] .col-12.col-md-auto:not(.vp-filter__select) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* --------------------------------------
     A15. Consignment table responsive
     Not the Consignment Manager's own tables (.vplus-cm-table): their
     layouts are owned by consignments-manager.css, and these flex rows
     overlapped its meta line at 768-991 (2026-09-23 plan, D1).
     -------------------------------------- */
  .vplus-submissions-tabs ~ .tab-content .table-responsive {
    border: none;
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) thead {
    display: none;
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 0.5rem;
    gap: 0.5rem;
    align-items: center;
    background: #fff;
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td {
    border: none;
    padding: 0.125rem 0;
  }
  /* Checkbox */
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:first-child {
    flex: 0 0 auto;
    order: -2;
  }
  /* Thumbnail */
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:nth-child(2) {
    flex: 0 0 auto;
    order: -1;
  }
  /* Title/Summary */
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:nth-child(3) {
    flex: 1 1 60%;
    min-width: 0;
  }
  /* Vendor */
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:nth-child(4) {
    flex: 0 0 100%;
    font-size: 0.85rem;
  }
  /* Reserve + Submitted */
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:nth-child(5),
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:nth-child(6) {
    flex: 0 0 auto;
    font-size: 0.85rem;
  }
  /* Actions */
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:last-child {
    flex: 0 0 100%;
    text-align: left !important;
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    padding-top: 0.375rem;
    border-top: 1px solid var(--bs-border-color-translucent);
  }
  .vplus-submissions-tabs ~ .tab-content table.table:not(.vplus-cm-table) tbody td:last-child .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  /* --------------------------------------
     Full Mode PO btn-group stacking
     -------------------------------------- */
  #purchase-option-row .btn-group {
    flex-direction: column;
  }

  /* --------------------------------------
     Btn-group: icon + label inline, sublabel below
     -------------------------------------- */
  #express-lot-type-row .btn-group .btn,
  #express-purchase-option-row .btn-group .btn,
  #lot-type-row .btn-group .btn,
  #purchase-option-row .btn-group .btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #express-lot-type-row .btn-group .btn .vplus-type-sublabel,
  #express-purchase-option-row .btn-group .btn .vplus-po-sublabel,
  #lot-type-row .btn-group .btn .vplus-type-sublabel,
  #purchase-option-row .btn-group .btn .vplus-po-sublabel {
    flex-basis: 100%;
  }

  /* Lot form dividers - consistent spacing */
  .form-row-separator hr.dashed {
    margin: 0.5rem 0 !important;
  }
}

.vplus-express-customise-btn {
  background: #fff;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* The button lives inside .vplus-express-card-header, whose `color:#fff`
   cascades to the FontAwesome <i> and rendered it white-on-white (invisible).
   Force the icon (and any text node) to inherit the button's dark colour;
   the !important + descendant selector beats the header's white. */
.vplus-express-customise-btn,
.vplus-express-customise-btn i,
.vplus-express-customise-btn .fa-solid,
.vplus-express-customise-btn .fa-regular,
.vplus-express-customise-btn svg {
  color: #000 !important;
  text-shadow: none;
}

.vplus-express-customise-btn:hover,
.vplus-express-customise-btn:focus {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.35);
}
.vplus-express-customise-btn:hover,
.vplus-express-customise-btn:focus,
.vplus-express-customise-btn:hover i,
.vplus-express-customise-btn:focus i,
.vplus-express-customise-btn:hover svg,
.vplus-express-customise-btn:focus svg {
  color: #000 !important;
}

/* Templates button — the primary action of the pair, so give it a lively
   filled look (vs the outline Customise button). White text/icon must beat the
   header's cascading color:#fff via !important, same tactic as Customise. */
.vplus-express-templates-btn {
  background: var(--bs-primary, #0d6efd);
  border: 1px solid var(--bs-primary, #0d6efd);
}
.vplus-express-templates-btn,
.vplus-express-templates-btn i,
.vplus-express-templates-btn .fa-solid,
.vplus-express-templates-btn .fa-regular,
.vplus-express-templates-btn svg {
  color: #fff !important;
  text-shadow: none;
}
.vplus-express-templates-btn:hover,
.vplus-express-templates-btn:focus {
  background: var(--bs-primary-text-emphasis, #0a58ca);
  border-color: var(--bs-primary-text-emphasis, #0a58ca);
}
.vplus-express-templates-btn:hover,
.vplus-express-templates-btn:focus,
.vplus-express-templates-btn:hover i,
.vplus-express-templates-btn:focus i,
.vplus-express-templates-btn:hover svg,
.vplus-express-templates-btn:focus svg {
  color: #fff !important;
}

/* "Or" separator between the Templates and Customise buttons — mirrors the
   Quick/Manual Quantity pill on the sale form (.vplus-blank-lots-or-text). */
.vplus-express-btn-or {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
/* .vplus-express-card-header span { color:#fff } (0,1,1) would win over a bare
   .vplus-express-btn-or-text (0,1,0) and render the pill text white-on-light
   (unreadable). Scope under the header + !important so the charcoal always wins,
   same tactic the Customise/Templates buttons already use in this header. */
.vplus-express-card-header .vplus-express-btn-or-text,
.vplus-express-btn-or-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  /* Pin the pill to a fixed light chip in BOTH modes: it sits on the orange
     Express header, so a light pill + charcoal text reads well in light AND
     dark. Depending on --bs-tertiary-bg made it go dark-on-dark (charcoal text
     on a #2d323c pill = ~1.1 contrast, invisible) once dark mode remapped the
     token. Hard-coding keeps the charcoal text legible everywhere. */
  background: #f1f3f5;
  color: #343a40 !important;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- AI Prompt Pre-Selection Glow ---- */
.vplus-prompt-btn.ai-recommended {
  box-shadow:
    0 0 0 2px rgba(13, 110, 253, 0.5),
    0 0 12px rgba(13, 110, 253, 0.3);
  border-color: #0d6efd !important;
  animation: vplus-preselect-pulse 2s ease-in-out 3;
  position: relative;
}

.vplus-prompt-btn.ai-recommended::after {
  content: "\2713";
  font-size: 11px;
  position: absolute;
  top: -6px;
  right: -6px;
  background: #0d6efd;
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

body.vplus-dark-mode .card-header h1,
body.vplus-dark-mode .card-header h2,
body.vplus-dark-mode .card-header h3,
body.vplus-dark-mode .card-header h4,
body.vplus-dark-mode .card-header h5,
body.vplus-dark-mode .card-header h6,
body.vplus-dark-mode .card-header .h1,
body.vplus-dark-mode .card-header .h2,
body.vplus-dark-mode .card-header .h3,
body.vplus-dark-mode .card-header .h4,
body.vplus-dark-mode .card-header .h5,
body.vplus-dark-mode .card-header .h6 {
  color: var(--vplus-dark-text, #f4f7fb);
}

body.vplus-dark-mode .vplus-cr-field-row,
body.vplus-dark-mode .vplus-cr-field-card,
body.vplus-dark-mode .vplus-cr-section-row,
body.vplus-dark-mode #cr-fields-container,
body.vplus-dark-mode #vplus-cr-fields-container {
  background: var(--vplus-dark-card, #1f2937) !important;
  border-color: var(--vplus-dark-border, #374151) !important;
  color: var(--vplus-dark-text, #f4f7fb) !important;
}

.vplus-cr-image-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}

.vplus-cr-image-thumb {
  width: 132px !important;
  min-height: 158px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.vplus-cr-image-thumb img,
.vplus-cr-image-thumb .photo {
  width: 132px !important;
  height: 132px !important;
  display: block !important;
  object-fit: cover;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 6px !important;
  flex: 0 0 132px;
}

.vplus-cr-image-thumb .progress {
  width: 100%;
  height: 9px;
  background: #d9f2e3;
  border-radius: 999px;
  position: static !important;
  overflow: hidden;
}

.vplus-cr-image-thumb .progress-bar {
  background-color: #198754 !important;
}

.vplus-cr-image-thumb .vplus-cr-image-remove,
.vplus-cr-image-thumb .remove-photo {
  position: static !important;
  width: 100% !important;
  min-height: 30px;
  border-radius: 6px;
  padding: 0.3rem 0.45rem !important;
  font-size: 0.78rem !important;
  line-height: 1.2;
}

@keyframes vplus-preselect-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 2px rgba(13, 110, 253, 0.5),
      0 0 12px rgba(13, 110, 253, 0.3);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(13, 110, 253, 0.4),
      0 0 20px rgba(13, 110, 253, 0.5);
  }
}

/* ============================================
   Swiper Photo Gallery (Submission Detail Modal)
   ============================================ */

.vplus-gallery-main {
  width: 100%;
  max-height: 500px;
  border-radius: 0.375rem;
  overflow: hidden;
  background: #f8f9fa;
}

.vplus-gallery-main .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vplus-gallery-main .swiper-slide img {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}

.vplus-gallery-thumbs {
  margin-top: 8px;
  height: 60px;
}

.vplus-gallery-thumbs .swiper-slide {
  width: 60px !important;
  height: 60px;
  opacity: 0.5;
  cursor: pointer;
  border-radius: 0.25rem;
  overflow: hidden;
  transition:
    opacity 0.2s ease,
    border-color 0.2s ease;
  border: 2px solid transparent;
}

.vplus-gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--bs-primary);
}

.vplus-gallery-thumbs .swiper-slide:hover {
  opacity: 0.85;
}

.vplus-gallery-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vplus-gallery-sections .vplus-gallery-section-jump {
  border-color: #000;
  background: #000;
  color: #fff;
}

.vplus-gallery-sections .vplus-gallery-section-jump:hover,
.vplus-gallery-sections .vplus-gallery-section-jump:focus-visible {
  border-color: #212529;
  background: #212529;
  color: #fff;
}

.vplus-gallery-sections .vplus-gallery-section-jump:active,
.vplus-gallery-sections .vplus-gallery-section-jump.is-active {
  border-color: #ffc107;
  background: #ffc107;
  color: #000;
}

/* Swiper navigation arrow overrides for modal context */
.vplus-gallery-main .swiper-button-next,
.vplus-gallery-main .swiper-button-prev {
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

.vplus-gallery-main .swiper-button-next::after,
.vplus-gallery-main .swiper-button-prev::after {
  font-size: 14px;
}

/* Zoom toggle button */
.vplus-gallery-zoom-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.vplus-gallery-zoom-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* CR photo thumbnails — click to jump in gallery */
.vplus-cr-gallery-thumb {
  transition:
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

.vplus-cr-gallery-thumb:hover {
  opacity: 0.8;
  box-shadow: 0 0 0 2px var(--bs-primary);
}

/* Google Places PlaceAutocompleteElement — match Bootstrap form-control */
gmp-place-autocomplete,
.vplus-place-autocomplete-element,
.vplus-address-autocomplete {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color, #212529);
  background-color: #fff;
  background-clip: padding-box;
  border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  appearance: none;
  /* AM6 — the widget ships `color-scheme: light dark`, so its shadow-DOM
     prediction dropdown follows the VIEWER'S device dark preference: on a
     dark-mode device the dropdown renders dark while our page stays light,
     giving dark text on a black dropdown. Pin light so the widget always
     renders its light dropdown to match the light form. */
  color-scheme: light;
}

gmp-place-autocomplete:focus-within,
.vplus-address-autocomplete:focus-within {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-control-sm + gmp-place-autocomplete,
.small gmp-place-autocomplete {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm, 0.25rem);
}

.vplus-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  margin-top: 1rem;
  justify-content: center;
}

.vplus-invoicing-sync-btn,
#vplus-filter-clear,
.vplus-pg-btn,
.button {
  display: inline-block;
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  line-height: 2.15384615;
  min-height: 1.875rem;
  color: #2c3338;
  background: #f6f7f7;
  border: 1px solid #c3c4c7;
  border-radius: 0.1875rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  vertical-align: middle;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  transition:
    background 0.1s,
    border-color 0.1s,
    color 0.1s;
  box-shadow: none;
  outline: none;
}

.button.button-primary.vplus-invoicing-sync-btn,
.button.button-primary.vplus-pg-btn,
.button.button-primary,
a.button.button-primary {
  background: #2271b1;
  border-color: #2271b1;
  color: #fff;
}

.vplus-pagination .button {
  min-width: 2.125rem;
  padding: 0 0.5rem;
  text-align: center;
}

.vplus-search-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.vplus-search-filters input[type="text"],
.vplus-search-filters input[type="date"],
.vplus-search-filters select {
  height: 1.875rem !important;
  min-height: 0 !important;
  line-height: 1.5rem !important;
  font-size: 0.8125rem !important;
  border: 1px solid #c3c4c7 !important;
  border-radius: 0.25rem !important;
  padding: 0 0.5rem !important;
  background: #fff !important;
  box-sizing: border-box !important;
  color: #2c3338 !important;
}

.vplus-search-filters .ts-control {
  min-height: 1.875rem !important;
  height: auto !important;
  padding: 0.125rem 0.375rem !important;
  border: 1px solid #c3c4c7 !important;
  border-radius: 0.25rem !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 0.8125rem !important;
  gap: 0.1875rem !important;
  cursor: pointer !important;
}

.vplus-search-filters .ts-control input {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 0.8125rem !important;
  color: #2c3338 !important;
}

.vplus-search-filters .ts-wrapper {
  flex: 0 0 auto;
  min-width: 10rem;
}

.ts-wrapper.multi {
  height: auto;
  min-height: 1.875rem;
}