/* Houston Wallpapering Visual Search Pro — premium frontend styling
 * Designed to feel native to WoodMart while elevating the perceived quality.
 */

:root{
	--hwp-vsp-accent:#a06a3f;
	--hwp-vsp-accent-dark:#8a5a32;
	--hwp-vsp-ink:#1c1a17;
	--hwp-vsp-soft:#f6f1ec;
	--hwp-vsp-line:rgba(28,26,23,.08);
	--hwp-vsp-shadow:0 24px 80px rgba(28,26,23,.18), 0 4px 12px rgba(28,26,23,.06);
	--hwp-vsp-radius:18px;
	--hwp-vsp-radius-sm:10px;
	--hwp-vsp-trans:cubic-bezier(.22,.61,.36,1);
}

/* Header tools button (matches WoodMart wd-tools-element rhythm) */
.hwp-vsp-tools-btn{
	display:inline-flex;align-items:center;justify-content:center;
	color:inherit;line-height:1;
}
.hwp-vsp-tools-btn>a{display:inline-flex;align-items:center;color:inherit;text-decoration:none}
.hwp-vsp-tools-btn .wd-tools-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit}
.hwp-vsp-cam-icon svg{display:block}
.hwp-vsp-tools-btn:hover{color:var(--hwp-vsp-accent)}

/* Mobile: icon-only (matches WoodMart's own mobile-icon behavior) */
@media (max-width:1024px){
	.hwp-vsp-tools-btn .wd-tools-text{display:none !important}
	.hwp-vsp-tools-btn>a{padding:0 6px}
}

/* Mobile drawer search row: camera icon sits immediately left of the magnifier.
   Scoped strictly under .mobile-nav.wd-side-hidden .wd-search-form so it cannot
   bleed elsewhere and so WoodMart/theme overrides cannot hide it. */
.mobile-nav.wd-side-hidden .wd-search-form form.searchform.hwp-vsp-has-mobile-camera{
	position:relative !important;
}
.mobile-nav.wd-side-hidden .wd-search-form form.searchform.hwp-vsp-has-mobile-camera input.s,
.mobile-nav.wd-side-hidden .wd-search-form form.searchform.hwp-vsp-has-mobile-camera input[name="s"]{
	padding-right:96px !important;
}
.mobile-nav.wd-side-hidden .wd-search-form .hwp-vsp-mobile-search-btn{
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	position:absolute !important;
	right:52px !important;
	top:50% !important;
	transform:translateY(-50%) !important;
	width:42px !important;
	height:42px !important;
	min-width:42px !important;
	min-height:42px !important;
	max-width:none !important;
	padding:0 !important;
	margin:0 !important;
	border:0 !important;
	background:transparent !important;
	color:#555 !important;
	opacity:1 !important;
	visibility:visible !important;
	z-index:5 !important;
	cursor:pointer !important;
	pointer-events:auto !important;
	line-height:1 !important;
	box-shadow:none !important;
	text-indent:0 !important;
	font-size:0 !important;
}
.mobile-nav.wd-side-hidden .wd-search-form .hwp-vsp-mobile-search-btn:hover,
.mobile-nav.wd-side-hidden .wd-search-form .hwp-vsp-mobile-search-btn:focus{
	color:#111 !important;
	background:transparent !important;
	outline:none !important;
}
.mobile-nav.wd-side-hidden .wd-search-form .hwp-vsp-mobile-search-btn svg{
	display:block !important;
	width:22px !important;
	height:22px !important;
	stroke:currentColor !important;
	fill:none !important;
	opacity:1 !important;
	visibility:visible !important;
	pointer-events:none !important;
}

/* Overlay CTA (inside .wd-search-full-screen) */
.hwp-vsp-overlay-cta{
	display:flex;justify-content:center;margin:0 0 16px;
}
.hwp-vsp-overlay-cta__btn{
	display:inline-flex;align-items:center;gap:10px;
	background:transparent;color:inherit;
	border:1px solid currentColor;border-radius:999px;
	padding:10px 22px;font:inherit;font-weight:500;cursor:pointer;
	transition:background-color .2s var(--hwp-vsp-trans), color .2s var(--hwp-vsp-trans), border-color .2s var(--hwp-vsp-trans);
}
.hwp-vsp-overlay-cta__btn:hover{background:currentColor}
.hwp-vsp-overlay-cta__btn:hover svg, .hwp-vsp-overlay-cta__btn:hover span{color:#fff;mix-blend-mode:difference}

/* Lock body when modal open */
html.hwp-vsp-locked, html.hwp-vsp-locked body{overflow:hidden}

/* Modal */
.hwp-vsp-modal{
	position:fixed;inset:0;z-index:99999;
	display:none;
}
.hwp-vsp-modal.is-open{display:block}
.hwp-vsp-modal__backdrop{
	position:absolute;inset:0;
	background:rgba(28,26,23,.55);
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
	animation:hwp-vsp-fade .2s var(--hwp-vsp-trans);
}
.hwp-vsp-modal__panel{
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
	width:min(880px, calc(100vw - 32px));
	max-height:calc(100vh - 32px);
	background:#fff;color:var(--hwp-vsp-ink);
	border-radius:var(--hwp-vsp-radius);
	box-shadow:var(--hwp-vsp-shadow);
	font-family:inherit;
	display:flex;flex-direction:column;
	overflow:visible;
	animation:hwp-vsp-rise .26s var(--hwp-vsp-trans);
}
.hwp-vsp-modal__scroll{
	overflow:auto;
	border-radius:inherit;
	max-height:100%;
	-webkit-overflow-scrolling:touch;
}
@keyframes hwp-vsp-fade{from{opacity:0}to{opacity:1}}
@keyframes hwp-vsp-rise{from{opacity:0;transform:translate(-50%,-46%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.hwp-vsp-modal .hwp-vsp-modal__panel > .hwp-vsp-modal__close{
	position:absolute !important;
	top:18px !important;
	right:18px !important;
	left:auto !important;
	bottom:auto !important;
	margin:0 !important;
	padding:0 !important;
	width:36px !important;
	height:36px !important;
	min-width:0 !important;
	min-height:0 !important;
	max-width:none !important;
	border:0 !important;
	border-radius:50% !important;
	background:rgba(28,26,23,.06) !important;
	color:var(--hwp-vsp-ink) !important;
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	box-shadow:none !important;
	transform:none !important;
	cursor:pointer;
	z-index:10;
	text-align:center;
	line-height:1;
	transition:background-color .15s var(--hwp-vsp-trans);
}
.hwp-vsp-modal .hwp-vsp-modal__panel > .hwp-vsp-modal__close:hover{background:rgba(28,26,23,.14) !important}
.hwp-vsp-modal .hwp-vsp-modal__panel > .hwp-vsp-modal__close:focus{outline:2px solid var(--hwp-vsp-accent);outline-offset:2px}
.hwp-vsp-modal .hwp-vsp-modal__panel > .hwp-vsp-modal__close svg{display:block;pointer-events:none}

.hwp-vsp-modal__header{padding:36px 64px 8px;text-align:center}
.hwp-vsp-modal__title{
	margin:0 0 8px;
	font-size:24px;font-weight:600;letter-spacing:-.01em;
	color:var(--hwp-vsp-ink);
}
.hwp-vsp-modal__subtitle{margin:0;font-size:15px;line-height:1.6;color:#5a544d}

.hwp-vsp-modal__body{padding:24px 36px 8px}
.hwp-vsp-modal__footer{
	padding:14px 36px 22px;text-align:center;
	border-top:1px solid var(--hwp-vsp-line);margin-top:8px;
}
.hwp-vsp-modal__brand{font-size:12px;color:#8a847c;letter-spacing:.04em;text-transform:uppercase}

/* Drop zone */
.hwp-vsp-drop{
	border:1.5px dashed rgba(28,26,23,.22);
	border-radius:var(--hwp-vsp-radius);
	background:var(--hwp-vsp-soft);
	padding:42px 28px;
	text-align:center;
	cursor:pointer;
	transition:border-color .2s var(--hwp-vsp-trans), background-color .2s var(--hwp-vsp-trans);
}
.hwp-vsp-drop:hover, .hwp-vsp-drop.is-drag{border-color:var(--hwp-vsp-accent);background:#fff}
.hwp-vsp-drop:focus{outline:2px solid var(--hwp-vsp-accent);outline-offset:3px}
.hwp-vsp-drop__icon{color:var(--hwp-vsp-accent);margin-bottom:14px}
.hwp-vsp-drop__text{margin:0 0 6px;font-size:16px;color:var(--hwp-vsp-ink)}
.hwp-vsp-drop__hint{margin:0;font-size:13px;color:#8a847c}
.hwp-vsp-link{color:var(--hwp-vsp-accent);text-decoration:underline;text-underline-offset:3px}

/* Preview */
.hwp-vsp-preview{display:flex;flex-direction:column;align-items:center;gap:18px}
.hwp-vsp-preview__image-wrap{
	max-width:100%;
	border-radius:var(--hwp-vsp-radius);
	overflow:hidden;
	background:#f1ece6;
	box-shadow:0 10px 28px rgba(28,26,23,.10);
}
.hwp-vsp-preview__img{display:block;max-width:100%;max-height:50vh;object-fit:contain}
.hwp-vsp-preview__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* Buttons */
.hwp-vsp-btn{
	display:inline-flex;align-items:center;justify-content:center;
	font:inherit;font-weight:500;cursor:pointer;
	padding:11px 22px;border-radius:999px;border:1px solid transparent;
	transition:transform .12s var(--hwp-vsp-trans), background-color .15s var(--hwp-vsp-trans), color .15s var(--hwp-vsp-trans), border-color .15s var(--hwp-vsp-trans), box-shadow .15s var(--hwp-vsp-trans);
}
.hwp-vsp-btn:active{transform:translateY(1px)}
.hwp-vsp-btn--primary{background:var(--hwp-vsp-ink);color:#fff}
.hwp-vsp-btn--primary:hover{background:var(--hwp-vsp-accent-dark)}
.hwp-vsp-btn--ghost{background:transparent;color:var(--hwp-vsp-ink);border-color:var(--hwp-vsp-line)}
.hwp-vsp-btn--ghost:hover{border-color:var(--hwp-vsp-ink)}
.hwp-vsp-btn--danger{color:#a02b2b;border-color:rgba(160,43,43,.25)}
.hwp-vsp-btn--danger:hover{border-color:#a02b2b}

/* Loading */
.hwp-vsp-loading{display:flex;flex-direction:column;align-items:center;padding:46px 24px;gap:18px}
.hwp-vsp-spinner{
	width:42px;height:42px;border-radius:50%;
	border:3px solid rgba(28,26,23,.12);
	border-top-color:var(--hwp-vsp-accent);
	animation:hwp-vsp-spin .9s linear infinite;
}
@keyframes hwp-vsp-spin{to{transform:rotate(360deg)}}
.hwp-vsp-loading__text{margin:0;color:#5a544d}

/* Results */
.hwp-vsp-results__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.hwp-vsp-results__title{margin:0;font-size:18px;font-weight:600}
.hwp-vsp-results__grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
	gap:18px;
}
.hwp-vsp-results__fallback{margin-top:18px;padding:14px 18px;border-radius:var(--hwp-vsp-radius-sm);background:var(--hwp-vsp-soft);font-size:14px;color:#5a544d;text-align:center}

/* Cards */
.hwp-vsp-card{
	display:flex;flex-direction:column;
	text-decoration:none;color:inherit;
	border-radius:var(--hwp-vsp-radius-sm);
	overflow:hidden;background:#fff;
	transition:transform .18s var(--hwp-vsp-trans), box-shadow .18s var(--hwp-vsp-trans);
}
.hwp-vsp-card--soft{box-shadow:0 1px 2px rgba(28,26,23,.04), 0 6px 18px rgba(28,26,23,.06)}
.hwp-vsp-card--minimal{box-shadow:none;border:1px solid var(--hwp-vsp-line)}
.hwp-vsp-card--classic{box-shadow:0 8px 22px rgba(28,26,23,.10)}
.hwp-vsp-card:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(28,26,23,.14)}
.hwp-vsp-card__image{aspect-ratio:3/4;background:#f1ece6;overflow:hidden}
.hwp-vsp-card__image img{width:100%;height:100%;object-fit:cover;display:block}
.hwp-vsp-card__body{padding:12px 14px 16px;display:flex;flex-direction:column;gap:6px}
.hwp-vsp-card__title{margin:0;font-size:14px;font-weight:600;line-height:1.35;color:var(--hwp-vsp-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hwp-vsp-card__cat{margin:0;font-size:12px;color:#8a847c;text-transform:uppercase;letter-spacing:.04em}
.hwp-vsp-card__price{font-size:14px;color:var(--hwp-vsp-ink)}
.hwp-vsp-card__price .woocommerce-Price-amount{font-weight:600}
.hwp-vsp-card__cta{margin-top:6px;font-size:13px;color:var(--hwp-vsp-accent);text-decoration:underline;text-underline-offset:3px}
.hwp-vsp-card__score{margin-top:4px;font-size:11px;color:#a09a92}

/* Error */
.hwp-vsp-error{padding:36px 24px;text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center}
.hwp-vsp-error__text{margin:0;color:#5a544d}

/* Admin debug banner (only visible to admins when debug mode is on) */
.hwp-vsp-debug{
	margin:0 0 18px;padding:14px 16px;
	background:#fff8ee;border:1px solid #f0d9a8;border-left:3px solid #c08a2c;
	border-radius:var(--hwp-vsp-radius-sm);
	font-size:13px;color:#5a4a30;
}
.hwp-vsp-debug__title{margin:0 0 6px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#8a6420}
.hwp-vsp-debug__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.hwp-vsp-debug__list li{display:flex;align-items:center;gap:8px}
.hwp-vsp-debug__dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#999}
.hwp-vsp-debug__dot.is-ok{background:#3a8a3a}
.hwp-vsp-debug__dot.is-warn{background:#c08a2c}
.hwp-vsp-debug__dot.is-info{background:#3a6e8a}
.hwp-vsp-debug__cta{margin:8px 0 0}
.hwp-vsp-debug__cta a{color:#8a5a32;text-decoration:underline}
.hwp-vsp-debug code{background:#fff;padding:1px 6px;border-radius:4px;font-size:12px}

/* Mobile */
@media (max-width: 600px){
	.hwp-vsp-modal__panel{width:100vw;height:100vh;max-height:100vh;border-radius:0}
	.hwp-vsp-modal .hwp-vsp-modal__panel > .hwp-vsp-modal__close{top:14px !important;right:14px !important;width:34px !important;height:34px !important}
	.hwp-vsp-modal__header{padding:28px 56px 4px}
	.hwp-vsp-modal__body{padding:18px 22px 8px}
	.hwp-vsp-modal__footer{padding:12px 22px 18px}
	.hwp-vsp-results__grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
	.hwp-vsp-drop{padding:32px 18px}
}

/* Hidden-attribute specificity bump — without these, display:flex on
   .hwp-vsp-loading/.hwp-vsp-preview/.hwp-vsp-error overrides [hidden]
   and the spinner stays visible after the error state is shown. */
.hwp-vsp-modal [hidden]{display:none !important}