/* ============================================================
   Horeka Product Scan — customer-facing scan & find
   ============================================================ */

:root{
	--hpis-accent:#ff5a1f;
	--hpis-accent-d:#e44a12;
	--hpis-ink:#1d1d1f;
	--hpis-muted:#6b7280;
	--hpis-line:#ececef;
	--hpis-exact:#0a8f4a;
	--hpis-strong:#0a8f4a;
	--hpis-likely:#c47d00;
	--hpis-similar:#6b7280;
}

/* ---- search-bar icon ------------------------------------------------ */
.hpis-icon-btn{
	display:inline-flex;align-items:center;justify-content:center;
	width:38px;height:38px;flex:0 0 auto;margin-left:4px;
	border:0;border-radius:50%;cursor:pointer;
	background:transparent;color:inherit;
	transition:background .15s ease,color .15s ease,transform .15s ease;
}
.hpis-icon-btn:hover{background:rgba(255,90,31,.12);color:var(--hpis-accent);transform:scale(1.05);}
.hpis-icon-btn svg{width:21px;height:21px;display:block;}

/* Inside the Horeka header pill: render as a full-height accent square,
   matching the adjacent blue search / red location buttons. */
.hk-search-inner .hpis-icon-btn{
	width:52px;height:46px;margin:0;border-radius:0;flex-shrink:0;
	background:var(--hpis-accent);color:#fff;transform:none;
}
.hk-search-inner .hpis-icon-btn:hover{background:var(--hpis-accent-d);color:#fff;transform:none;}
.hk-search-inner .hpis-icon-btn svg{width:19px;height:19px;}
@media (max-width:768px){
	.hk-search-inner .hpis-icon-btn{width:44px;height:42px;}
}

/* Quick-OS desktop header search box (.hqd-pdp-search-wrap → readonly trigger).
   Children have pointer-events:none; re-enable ours so the scan icon is clickable. */
.hqd-pdp-search-wrap .hpis-icon-btn{
	width:46px;height:44px;margin:0;border-radius:0;flex-shrink:0;
	background:var(--hpis-accent);color:#fff;transform:none;pointer-events:auto;
}
.hqd-pdp-search-wrap.hq-search-box .hpis-icon-btn{pointer-events:auto;}
.hqd-pdp-search-wrap .hpis-icon-btn:hover{background:var(--hpis-accent-d);color:#fff;transform:none;}
.hqd-pdp-search-wrap .hpis-icon-btn svg{width:18px;height:18px;}

/* Quick-OS full-screen search overlay input row. */
.hq-search-overlay-input-wrapper{position:relative;}
.hq-search-overlay-input-wrapper .hpis-icon-btn{
	width:40px;height:40px;margin-left:6px;border-radius:11px;flex-shrink:0;
	background:var(--hpis-accent);color:#fff;
}
.hq-search-overlay-input-wrapper .hpis-icon-btn:hover{background:var(--hpis-accent-d);color:#fff;}

/* Quick-OS mobile (brand) search pill — small round icon. */
.hqmb-search-form .hpis-icon-btn{
	width:28px;height:28px;margin:0;flex-shrink:0;
	background:var(--hpis-accent);color:#fff;
}
.hqmb-search-form .hpis-icon-btn:hover{background:var(--hpis-accent-d);color:#fff;transform:none;}
.hqmb-search-form .hpis-icon-btn svg{width:15px;height:15px;}

/* Discover hub shop/product search (flex row, gap:8px). */
.search-box-wrapper .hpis-icon-btn{
	width:42px;height:42px;margin:0;border-radius:10px;flex-shrink:0;
	background:var(--hpis-accent);color:#fff;
}
.search-box-wrapper .hpis-icon-btn:hover{background:var(--hpis-accent-d);color:#fff;transform:none;}

/* Discover all-products search (grey rounded pill, gap:8px, own padding). */
.hd-ap-search-wrap .hpis-icon-btn{
	width:28px;height:28px;margin:0;border-radius:8px;flex-shrink:0;
	background:var(--hpis-accent);color:#fff;
}
.hd-ap-search-wrap .hpis-icon-btn:hover{background:var(--hpis-accent-d);color:#fff;transform:none;}
.hd-ap-search-wrap .hpis-icon-btn svg{width:15px;height:15px;}

/* ---- overlay + modal ------------------------------------------------ */
.hpis-overlay{
	position:fixed;inset:0;z-index:999999;
	background:rgba(17,18,20,.55);backdrop-filter:blur(3px);
	display:flex;align-items:flex-start;justify-content:center;
	padding:5vh 16px;opacity:0;visibility:hidden;transition:opacity .2s ease;
	overflow-y:auto;
}
.hpis-overlay.is-open{opacity:1;visibility:visible;}
.hpis-modal{
	width:100%;max-width:760px;background:#fff;border-radius:18px;
	box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden;
	transform:translateY(14px) scale(.98);transition:transform .22s cubic-bezier(.2,.8,.2,1);
	font-family:inherit;color:var(--hpis-ink);
}
.hpis-overlay.is-open .hpis-modal{transform:none;}
.hpis-head{
	display:flex;align-items:center;gap:10px;
	padding:16px 18px;border-bottom:1px solid var(--hpis-line);
}
.hpis-head h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;}
.hpis-head .hpis-spark{color:var(--hpis-accent);}
.hpis-close{
	margin-left:auto;border:0;background:#f3f4f6;width:32px;height:32px;border-radius:50%;
	font-size:18px;line-height:1;cursor:pointer;color:#444;
}
.hpis-close:hover{background:#e5e7eb;}

/* ---- tabs ----------------------------------------------------------- */
.hpis-tabs{display:flex;gap:4px;padding:10px 14px 0;}
.hpis-tab{
	flex:1;border:0;background:transparent;cursor:pointer;
	padding:10px 8px;font-size:13.5px;font-weight:600;color:var(--hpis-muted);
	border-bottom:2.5px solid transparent;display:flex;align-items:center;justify-content:center;gap:6px;
}
.hpis-tab.is-active{color:var(--hpis-ink);border-bottom-color:var(--hpis-accent);}
.hpis-tab svg{width:16px;height:16px;}

.hpis-body{padding:16px 18px 20px;max-height:64vh;overflow-y:auto;}
.hpis-pane{display:none;}
.hpis-pane.is-active{display:block;}

/* ---- image drop zone ------------------------------------------------ */
.hpis-drop{
	border:2px dashed #d6d9de;border-radius:14px;padding:26px 18px;text-align:center;
	cursor:pointer;transition:border-color .15s,background .15s;background:#fafbfc;
}
.hpis-drop:hover,.hpis-drop.is-drag{border-color:var(--hpis-accent);background:#fff7f3;}
.hpis-drop svg{width:40px;height:40px;color:var(--hpis-accent);margin-bottom:8px;}
.hpis-drop-title{font-weight:700;font-size:15px;}
.hpis-drop-sub{font-size:12.5px;color:var(--hpis-muted);margin-top:4px;}

.hpis-preview{display:none;margin-top:6px;position:relative;}
.hpis-preview img{max-height:180px;border-radius:12px;display:block;margin:0 auto;}
.hpis-preview.is-on{display:block;}

.hpis-actions{display:flex;gap:10px;margin-top:14px;}
.hpis-btn{
	flex:1;border:0;border-radius:11px;padding:12px;font-size:14.5px;font-weight:700;cursor:pointer;
	background:var(--hpis-accent);color:#fff;transition:background .15s;
}
.hpis-btn:hover{background:var(--hpis-accent-d);}
.hpis-btn:disabled{opacity:.5;cursor:default;}
.hpis-btn-ghost{background:#f3f4f6;color:#333;}
.hpis-btn-ghost:hover{background:#e5e7eb;}

/* ---- text inputs ---------------------------------------------------- */
.hpis-input,.hpis-textarea{
	width:100%;border:1.5px solid #e2e4e9;border-radius:11px;padding:12px 14px;
	font-size:14.5px;font-family:inherit;color:var(--hpis-ink);box-sizing:border-box;
}
.hpis-input:focus,.hpis-textarea:focus{outline:none;border-color:var(--hpis-accent);}
.hpis-textarea{min-height:130px;resize:vertical;line-height:1.5;}
.hpis-hint{font-size:12px;color:var(--hpis-muted);margin:6px 2px 0;}

/* ---- status / loader ------------------------------------------------ */
.hpis-status{display:none;align-items:center;gap:10px;padding:16px 4px;color:var(--hpis-muted);font-size:13.5px;}
.hpis-status.is-on{display:flex;}
.hpis-spin{
	width:18px;height:18px;border:2.5px solid #e6e6e6;border-top-color:var(--hpis-accent);
	border-radius:50%;animation:hpis-rot .7s linear infinite;
}
@keyframes hpis-rot{to{transform:rotate(360deg);}}
.hpis-caption{font-size:12.5px;color:var(--hpis-muted);margin:2px 2px 12px;}
.hpis-caption b{color:var(--hpis-ink);}

/* ---- results -------------------------------------------------------- */
.hpis-results{margin-top:6px;}
.hpis-tier{margin-bottom:18px;}
.hpis-tier-head{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;}
.hpis-tier-label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.hpis-tier-sub{font-size:12px;color:var(--hpis-muted);}
.hpis-tier-exact .hpis-tier-label,.hpis-tier-strong .hpis-tier-label{color:var(--hpis-exact);}
.hpis-tier-likely .hpis-tier-label{color:var(--hpis-likely);}
.hpis-tier-similar .hpis-tier-label{color:var(--hpis-similar);}

.hpis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.hpis-card{
	display:flex;flex-direction:column;border:1px solid var(--hpis-line);border-radius:13px;
	overflow:hidden;text-decoration:none;color:var(--hpis-ink);background:#fff;
	transition:box-shadow .15s,transform .15s,border-color .15s;
}
.hpis-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.10);transform:translateY(-2px);border-color:#dfe1e6;}
.hpis-card-img{position:relative;aspect-ratio:1/1;background:#f6f7f8;}
.hpis-card-img img{width:100%;height:100%;object-fit:contain;display:block;}
.hpis-conf{
	position:absolute;top:7px;right:7px;font-size:11px;font-weight:800;color:#fff;
	background:rgba(10,143,74,.92);padding:2px 7px;border-radius:20px;
}
.hpis-likely .hpis-conf{background:rgba(196,125,0,.92);}
.hpis-similar .hpis-conf{background:rgba(107,114,128,.92);}
.hpis-card-body{padding:9px 10px 11px;}
.hpis-card-name{font-size:12.8px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hpis-card-price{font-size:13px;font-weight:700;color:var(--hpis-accent);margin-top:4px;}
.hpis-card-price del{color:var(--hpis-muted);font-weight:400;font-size:11px;}

/* discover: shop name + verified tick under the product */
.hpis-card-shop{display:flex;align-items:center;gap:3px;margin-top:5px;min-width:0;}
.hpis-shop-name{font-size:11.5px;color:var(--hpis-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hpis-verified{flex-shrink:0;display:inline-flex;align-items:center;line-height:0;}
.hpis-verified svg{display:block;}
.hpis-c-match-text{display:inline-flex;flex-direction:column;gap:2px;min-width:0;}
.hpis-c-shop{font-size:11px;color:var(--hpis-muted);font-weight:600;display:inline-flex;align-items:center;gap:3px;}
.hpis-c-shop svg{vertical-align:middle;}

.hpis-empty{text-align:center;color:var(--hpis-muted);padding:30px 10px;font-size:14px;}

/* ---- list-mode table ------------------------------------------------ */
.hpis-list-summary{font-size:13.5px;margin:0 2px 12px;}
.hpis-list-summary b{color:var(--hpis-exact);}
.hpis-list-table{width:100%;border-collapse:collapse;font-size:13px;}
.hpis-list-table th{
	text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
	color:var(--hpis-muted);padding:6px 8px;border-bottom:1.5px solid var(--hpis-line);
}
.hpis-list-table td{padding:9px 8px;border-bottom:1px solid var(--hpis-line);vertical-align:middle;}
.hpis-c-input{font-weight:600;max-width:160px;}
.hpis-c-match a{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--hpis-ink);}
.hpis-c-match img{width:34px;height:34px;object-fit:contain;border-radius:6px;background:#f6f7f8;flex:0 0 auto;}
.hpis-nomatch{color:#b91c1c;font-weight:600;}
.hpis-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;}
.hpis-badge-exact,.hpis-badge-strong{background:#e7f6ee;color:var(--hpis-exact);}
.hpis-badge-likely{background:#fdf3e0;color:var(--hpis-likely);}
.hpis-badge-similar{background:#f1f2f4;color:var(--hpis-similar);}
.hpis-row-none td{background:#fff8f8;}
.hpis-list-table th:last-child,.hpis-c-price{text-align:right;}
.hpis-c-price{font-weight:700;color:var(--hpis-ink);white-space:nowrap;}
.hpis-c-price .hpis-mrp,.hpis-c-price del{color:var(--hpis-muted);font-weight:400;font-size:11.5px;margin-left:5px;text-decoration:line-through;}
.hpis-c-price bdi{white-space:nowrap;}

/* ---- responsive ----------------------------------------------------- */
@media (max-width:600px){
	.hpis-overlay{padding:0;}
	.hpis-modal{max-width:100%;min-height:100%;border-radius:0;}
	.hpis-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
	.hpis-body{max-height:none;}
	.hpis-c-input{max-width:110px;}
	.hpis-list-table img{display:none;}
	.hpis-tab span{display:none;}
}