/* Visual Product Search – Modern Minimal UI */

/* Wrapper */
.vps-search-wrapper {
	max-width: 100%;
	margin: 24px auto 48px;
	padding: 0px;
	min-height: 100vh;
}

/* Upload area */
.vps-upload-box {
	position: relative;
	background: #0b0b0b08;
	border: 1.5px dashed #e5e7eb;
	border-radius: 14px;
	padding: 32px 20px;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.vps-upload-box:hover { border-color: #9ca3af; background: #ffffff; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.vps-upload-box.dragover { border-color: #111827; background: #f9fafb; }

.vps-upload-placeholder { display: block; }
.vps-upload-icon { color: #9ca3af; margin-bottom: 10px; }
.vps-upload-box h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: #111827; }
.vps-upload-box p { font-size: 13px; color: #6b7280; margin: 0; }

/* Preview */
.vps-preview { position: relative; border-radius: 12px; overflow: hidden; }
.vps-preview img { width: 100%; height: auto; display: block; }

/* Inline preview toolbar (inside image) */
.vps-preview-toolbar { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: center; padding: 12px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%); }
.vps-preview-toolbar .vps-btn { background: #111827; color: #fff; border-color: #111827; box-shadow: 0 6px 22px rgba(0,0,0,.22); }
.vps-preview-toolbar .vps-btn:hover { background:#0a0f1a; }

.vps-fab-apply { right: 16px; bottom: 16px; background: #111827; color: #fff; border-color: #111827; }
/* We no longer use the floating apply button by default since the action is inside preview toolbar */
.vps-fab-apply { display: none !important; }

/* Top actions (Lens-like) */
.vps-action-bar { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 10px 0 16px; flex-wrap: wrap; }
.vps-actions-left, .vps-actions-right { display: flex; gap: 8px; align-items: center; }
.vps-chip { font-size: 12px; color: #6b7280; background: #f3f4f6; padding: 6px 10px; border-radius: 999px; }

.vps-btn { appearance: none; border: 1px solid #e5e7eb; background: #fff; color: #111827; border-radius: 10px; padding: 8px 12px; font-size: 13px; line-height: 1; cursor: pointer; transition: box-shadow .15s ease, transform .05s ease, background .15s ease, border-color .15s ease; }
.vps-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); border-color: #d1d5db; }
.vps-btn:active { transform: translateY(1px); }
.vps-btn-primary { background: #111827; color:#fff; border-color:#111827; }
.vps-btn-primary:hover { background:#0a0f1a; }
.vps-btn-ghost { background: transparent; border-color: transparent; color: #374151; }

/* Results */
.vps-results { margin-top: 18px; }

/* Masonry container */
.vps-results .products { position: relative; display: block; }
#vpsProductsGrid { position: relative; list-style: none; margin: 0; padding: 0; min-height: 40px; }
#vpsProductsGrid .product { position: absolute; opacity: 0; background: #fff; overflow: hidden;}

/* Loading skeleton layout overrides */
#vpsProductsGrid.loading { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; height: auto; }
#vpsProductsGrid.loading .product { position: relative; opacity: 1; transform: none; }
@media (max-width: 1200px) { #vpsProductsGrid.loading { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { #vpsProductsGrid.loading { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
@media (max-width: 480px) { #vpsProductsGrid.loading { grid-template-columns: repeat(2, 1fr); } }

/* Title/price skeleton bars */
.vps-skel-line { height: 12px; background: linear-gradient(90deg, #f2f4f7 25%, #e5e7eb 37%, #f2f4f7 63%); background-size: 400% 100%; animation: vps-shimmer 1.2s infinite; border-radius: 6px; }
.woo-title .vps-skel-line { margin: 8px 0; }

/* Card content */
.vps-results .woo-image { border-radius: 12px; position: relative; background: #f8fafc; overflow: hidden; }
.vps-results .woo-image img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .25s ease, transform .3s ease; }
.vps-results .woo-image img.loaded { opacity: 1; }
.vps-results .woo-image.loaded::before { display:none; }

/* Skeleton */
.vps-results .woo-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f2f4f7 25%, #e5e7eb 37%, #f2f4f7 63%); background-size: 400% 100%; animation: vps-shimmer 1.2s infinite; }
@keyframes vps-shimmer { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }

.vps-results .similarity-badge { position: absolute; top: 10px; z-index: 2; background: rgba(17,24,39,.9); color:#fff; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; backdrop-filter: blur(4px); }

.vps-results .woo-title { padding: 10px 12px 12px; }
.vps-results .woo-title h3 { font-size: 13px !important; line-height: 1.35; margin: 0 0 6px; color: #ad0000; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vps-results .woo-title h3 { line-clamp: 2; }
.vps-results .price { font-size: 12px; color: #2563eb; font-weight: 700; display: flex;justify-content: end;}

/* Loading */
.vps-loading { text-align: center; padding: 28px 16px; }
.vps-loading .spinner, .vps-spinner { width: 42px; height: 42px; border: 3px solid #eef2f7; border-top-color: #111827; border-radius: 50%; margin: 0 auto 10px; animation: vps-spin 1s linear infinite; }
@keyframes vps-spin { to { transform: rotate(360deg); } }

/* Inline cropper section */
.vps-cropper-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px; margin: 12px 0 18px; box-shadow: 0 4px 18px rgba(0,0,0,.04); }
.vps-cropper-header { display:flex; align-items:center; justify-content: space-between; padding: 6px 6px 10px; border-bottom: 1px solid #f3f4f6; }
.vps-cropper-header h3 { margin: 0; font-size: 14px; font-weight: 700; color: #111827; }
.vps-cropper-container { background: #f8fafc; border-radius: 10px; padding: 8px; }
.vps-cropper-canvas { width: 100%; max-height: 68vh; overflow: hidden; display:flex; align-items:center; justify-content:center; }
.vps-cropper-canvas img { max-width: 100%; height: auto; display:block; }
.vps-cropper-footer { padding: 10px 6px 6px; border-top: 1px solid #f3f4f6; text-align: end; }
.vps-cropper-actions { display: inline-flex; gap: 8px; align-items: center; }

/* Floating Action Buttons */
.vps-fab { position: fixed; z-index: 9999; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid #e5e7eb; background: #ad0000; color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.12); cursor: pointer; font-size: 13px; }
.vps-fab:hover { box-shadow: 0 10px 32px rgba(0,0,0,.16); }
.vps-fab-new { left: 16px; bottom: 16px; }
.vps-fab-apply { right: 16px; bottom: 16px; background: #111827; color: #fff; border-color: #111827; }

@media (max-width: 480px) {
	.vps-fab { padding: 9px 12px; font-size: 12px; }
	.vps-fab-new { left: 12px; bottom: 70px; }
	.vps-fab-apply { right: 12px; bottom: 12px; }
}

/* Responsive */
@media (max-width: 1024px) {
	.vps-search-wrapper { padding: 0; }
}

/* Responsive */
@media (max-width: 850px) {
	.vps-fab-new { left: 12px; bottom: 70px; }
}

@media (max-width: 768px) {
	.vps-upload-box { padding: 24px 14px; }
	.vps-action-bar { gap: 6px; }
}

@media (max-width: 480px) {
	.vps-upload-box { padding: 18px 12px; }
}