/* Image-question thumbnails + lightbox. Shared by the vendor register page and the
 * vendor drawer (review + edit); mirrors the ticketassignment show/edit treatment. */

/* Edit affordance: 88px thumbnail beside Download / Remove actions */
.qimg-edit { display: flex; flex-direction: row; align-items: center; gap: 1rem; }
.qimg-edit__actions { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
.qimg-edit__actions .btn { white-space: nowrap; }
.qimg-thumb { display: block; width: 88px; height: 88px; padding: 0; margin: 0; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; background: #f8f9fa; position: relative; cursor: pointer; box-shadow: none; flex: none; }
.qimg-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.qimg-thumb:focus-visible { outline: 2px solid #1278b4; outline-offset: 2px; }
.qimg-thumb__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); color: #fff; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.qimg-thumb:hover .qimg-thumb__overlay, .qimg-thumb:focus-visible .qimg-thumb__overlay { opacity: 1; }

/* Non-image upload (e.g. a PDF): a document chip in place of the thumbnail. */
.qimg-file__doc { display: inline-flex; align-items: center; gap: .6rem; max-width: 320px; padding: 10px 14px; border: 1px solid #dee2e6; border-radius: 8px; background: #f8f9fa; color: #1a1a1a; text-decoration: none; }
.qimg-file__doc:hover { border-color: #cbd2d9; color: #1a1a1a; }
.qimg-file__doc svg { flex: none; color: #6b7280; }
.qimg-file__name { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Read-only display: 72px thumbnail beside Download */
.qimg { display: flex; flex-direction: row; align-items: center; gap: 1rem; }
.qimg__thumb { display: block; width: 72px; height: 72px; padding: 0; margin: 0; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; background: #f8f9fa; position: relative; cursor: pointer; flex: none; }
.qimg__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.qimg__thumb:focus-visible { outline: 2px solid #1278b4; outline-offset: 2px; }
.qimg__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); color: #fff; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.qimg__thumb:hover .qimg__overlay, .qimg__thumb:focus-visible .qimg__overlay { opacity: 1; }

.qimg-error { color: #dc2626; font-size: .85rem; margin-top: .35rem; }
.upload-loading { display: flex; align-items: center; gap: .5rem; color: #6b7280; font-size: .85rem; margin-top: .5rem; }

/* Edge-to-edge lightbox: the image is the content, floating close over a dark scrim */
#questionImageLightbox .modal-content { background: transparent; border: 0; box-shadow: none; text-align: center; }
.qimg-lightbox__body { position: relative; display: inline-block; }
.qimg-lightbox__img { display: block; max-width: 100%; max-height: min(85vh, 900px); width: auto; height: auto; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.qimg-lightbox__close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 20, 22, .85); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.qimg-lightbox__close:hover { background: rgba(20, 20, 22, 1); }
.qimg-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Ad layout reference image on checkout pages (sponsor, vendor, standalone). */
.ad-specs-image--checkout .ad-specs-image__figure { display: flex; justify-content: center; }
.ad-specs-image--checkout .ad-specs-image__thumb {
  display: block; padding: 0; margin: 0; border: 1px solid #dee2e6; border-radius: 8px;
  overflow: hidden; background: #f8f9fa; position: relative; cursor: pointer; box-shadow: none;
  max-width: 100%; line-height: 0;
}
.ad-specs-image--checkout .ad-specs-image__img {
  display: block; max-height: 400px; max-width: 100%; width: auto; height: auto; object-fit: contain;
}
.ad-specs-image--checkout .ad-specs-image__thumb:focus-visible { outline: 2px solid #1278b4; outline-offset: 2px; }
.ad-specs-image--checkout .ad-specs-image__overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.45); color: #fff; opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.ad-specs-image--checkout .ad-specs-image__thumb:hover .ad-specs-image__overlay,
.ad-specs-image--checkout .ad-specs-image__thumb:focus-visible .ad-specs-image__overlay { opacity: 1; }