/* ---------- Fonts (host these two woff2 files yourself, e.g. in this plugin's /fonts/ folder) ---------- */
@font-face{
	font-family:Interstate;
	src:url(fonts/Interstate-Regular.woff2) format("woff2");
	font-weight:400;
	font-display:swap;
}
@font-face{
	font-family:Interstate;
	src:url(fonts/Interstate-Bold.woff2) format("woff2");
	font-weight:700;
	font-display:swap;
}
@font-face{
	font-family:"Interstate Cond";
	src:url(fonts/Interstate-BlackCond.woff2) format("woff2");
	font-weight:900;
	font-display:swap;
}

/* ---------- Design tokens (site-wide vars, only what the finder uses) ---------- */
.finder-app, .finder-page{
	--ink:#102f49;
	--deep:#08253d;
	--sage:#dff3f8;
	--acid:#a8cf45;
	--cream:#eff9fb;
	--paper:#f8fcfd;
	--rust:#1598cf;
	--line:#102f4929;
}

/* Nuclear reset: neutralize any theme/plugin button styling (WooCommerce, Elementor, etc.) bleeding
   into the finder's own buttons across every interaction state, before our own rules apply below. */
.finder-app button,
.finder-app button:hover,
.finder-app button:focus,
.finder-app button:active,
.finder-app button:disabled,
.finder-app button:disabled:hover{
	-webkit-appearance:none;
	appearance:none;
	box-shadow:none !important;
	outline:none !important;
	text-shadow:none !important;
}

.finder-app *{ box-sizing:border-box; }
.finder-app em{ text-transform:uppercase; font-family:"Interstate Cond",Arial Narrow,sans-serif; font-style:normal; font-weight:900; }
.finder-app a{ color:inherit; text-decoration:none; }
.finder-app button{ font:inherit; }

/* ---------- Page / app shell ---------- */
.finder-page{ background:#dff2f6; min-height:100vh; }

.finder-app{
	min-height:calc(100vh - 92px);
	color:var(--deep);
	background:linear-gradient(115deg,#edf8fa 0 28%,#dff2f6 28% 100%);
	display:grid;
	grid-template-columns:.7fr 1.05fr 1.28fr;
	gap:14px;
	padding:34px 3vw 28px;
}
.finder-intro, .finder-workspace, .finder-results{ min-width:0; }

/* ---------- Left column: intro ---------- */
.finder-intro{ display:flex; flex-direction:column; padding:35px 2.2vw 24px 1.5vw; }
.finder-intro .eyebrow{ color:var(--rust); margin-bottom:42px; }
.finder-intro h1{
	margin:0;
	letter-spacing:-.025em;
	text-transform:uppercase;
	font:900 clamp(62px,5.4vw,92px)/.78 "Interstate Cond",sans-serif;
}
.finder-intro h1 em{ color:var(--rust); }
.finder-intro > p:not(.eyebrow){
	color:#08253dad;
	max-width:330px;
	margin:34px 0 0 2.5vw;
	font-size:13px;
	line-height:1.65;
}

.finder-paths{ display:grid; gap:7px; margin-top:40px; }
.finder-paths button{
	display:grid;
	grid-template-columns:30px 1fr;
	align-items:center;
	text-align:left;
	border:1px solid var(--line);
	min-height:62px;
	color:var(--deep);
	cursor:pointer;
	letter-spacing:.08em;
	text-transform:uppercase;
	background:#ffffff8c;
	padding:0 18px;
	font-size:11px;
	font-weight:700;
	transition:transform .25s,background .25s,color .25s;
}
.finder-paths button span{ color:var(--rust); font-size:7px; }
.finder-paths button:hover{ transform:translate(4px); }
.finder-paths button.active{ background:var(--acid); border-color:var(--acid); }
.finder-paths button.active span{ color:var(--deep); }

.finder-safety{
	display:flex;
	flex-direction:column;
	gap:7px;
	border-top:1px solid var(--line);
	margin-top:auto;
	padding-top:24px;
}
.finder-safety strong{ letter-spacing:.14em; font-size:8px; }
.finder-safety span{ color:#08253d94; max-width:320px; font-size:9px; line-height:1.5; }

/* ---------- Middle column: workspace (dark panel) ---------- */
.finder-workspace{
	display:grid;
	grid-template-rows:auto auto 1fr;
	background:var(--deep);
	color:#fff;
	padding:24px;
}
.finder-steps{
	display:flex;
	gap:20px;
	color:#ffffff52;
	letter-spacing:.12em;
	border-bottom:1px solid #ffffff26;
	padding-bottom:20px;
	font-size:7px;
	font-weight:700;
}
.finder-steps span.active{ color:var(--acid); }

.finder-question{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	min-height:123px;
	padding:26px 0 18px;
}
.finder-question > span{ color:#ffffff8f; letter-spacing:.16em; font-size:8px; font-weight:700; }
.finder-question > strong{
	text-transform:uppercase;
	color:var(--acid);
	font:900 clamp(35px,3.3vw,53px)/.86 "Interstate Cond",sans-serif;
}

.finder-options{ display:grid; align-content:start; border-top:1px solid #ffffff26; }
.finder-options button{
	display:grid;
	grid-template-columns:28px minmax(100px,.85fr) 1fr 25px;
	align-items:center;
	gap:8px;
	color:#fff !important;
	cursor:pointer;
	text-align:left;
	background:transparent !important;
	border:0 !important;
	border-bottom:1px solid #ffffff21 !important;
	min-height:65px;
	padding:7px 6px;
	transition:padding .22s,background .22s;
}
.finder-options button > span{ color:var(--acid); font-size:7px; }
.finder-options button strong{
	text-transform:uppercase;
	font:900 clamp(18px,1.45vw,24px)/.95 "Interstate Cond",sans-serif;
}
.finder-options button small{ color:#ffffff73; font-size:8px; line-height:1.3; }
.finder-options button i{
	display:grid;
	place-items:center;
	border:1px solid #ffffff40;
	border-radius:50%;
	width:24px;
	height:24px;
	font-size:10px;
	font-style:normal;
}
.finder-options button:hover,
.finder-options button.active{ background:#ffffff0f !important; padding-left:13px; }
.finder-options button.active strong{ color:var(--acid) !important; }
.finder-options button.active i{
	border-color:var(--acid) !important;
	background:var(--acid) !important;
	color:var(--deep) !important;
	transform:rotate(45deg);
}
.finder-options button:disabled{ opacity:.35; cursor:not-allowed; }
/* Hard-lock the disabled look against theme bleed-through (e.g. red/pink :disabled styling from the theme's own buttons) */
.finder-options button:disabled,
.finder-options button:disabled:hover{
	background:transparent !important;
	border-color:transparent !important;
	border-bottom-color:#ffffff21 !important;
	color:#fff !important;
	box-shadow:none !important;
	outline:none !important;
	padding-left:6px !important;
}
.finder-options button:disabled strong{ color:#fff !important; }
.finder-options button:disabled i{
	border-color:#ffffff40 !important;
	background:transparent !important;
	color:inherit !important;
	transform:none !important;
}

/* ---------- Right column: results ---------- */
.finder-results{
	display:flex;
	flex-direction:column;
	border-top:7px solid var(--rust);
	background:#fff;
	padding:25px 26px 18px;
	box-shadow:0 18px 55px #08253d17;
}
.finder-result-head{
	display:flex;
	justify-content:space-between;
	color:var(--rust);
	letter-spacing:.14em;
	font-size:7px;
	font-weight:700;
}
.finder-results h2{
	margin:24px 0 10px;
	letter-spacing:-.02em;
	text-transform:uppercase;
	font:900 clamp(45px,4vw,68px)/.8 "Interstate Cond",sans-serif;
}
.finder-results h2 em{ color:var(--rust); }
.finder-reason{ color:#08253d99; max-width:530px; min-height:37px; margin:4px 0 14px; font-size:10px; line-height:1.45; }

.finder-formats{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:11px; }
.finder-formats button{
	border:1px solid var(--line);
	color:var(--deep);
	cursor:pointer;
	letter-spacing:.08em;
	text-transform:uppercase;
	background:transparent;
	border-radius:100px;
	padding:7px 10px;
	font-size:7px;
	font-weight:700;
}
.finder-formats button.active,
.finder-formats button:hover{ background:var(--deep); border-color:var(--deep); color:#fff; }

.finder-match-list{
	display:grid;
	border-top:1px solid var(--line);
	max-height:380px !important; /* ~3.5 rows visible (108px each) so a partial 4th row hints there's more to scroll */
	overflow-y:auto !important;
}
.finder-match-list::-webkit-scrollbar{ width:6px; }
.finder-match-list::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.finder-match-list article{
	display:grid;
	grid-template-columns:70px 1fr auto;
	align-items:center;
	gap:13px;
	min-height:108px;
	padding:10px 0;
	border-bottom:1px solid var(--line);
}
.finder-match-image{ display:grid; place-items:center; width:66px; height:78px; background:#e5f4f7; overflow:hidden; }
.finder-match-image img{ width:60px; height:72px; object-fit:contain; filter:drop-shadow(0 8px 6px #08253d24); }
.finder-match-list article small{ color:var(--rust); letter-spacing:.12em; font-size:6px; font-weight:700; }
.finder-match-list article h3{
	margin:5px 0 3px;
	text-transform:uppercase;
	font:900 clamp(20px,1.7vw,29px)/.9 "Interstate Cond",sans-serif;
}
.finder-match-list article p{ margin:0; color:#08253d91; text-transform:uppercase; letter-spacing:.08em; font-size:8px; }

.finder-match-action{ display:flex; flex-direction:column; justify-content:space-between; align-self:stretch; align-items:end; }
.finder-match-action strong{ font-size:9px; }
.finder-match-action > div{ display:flex; align-items:center; gap:6px; }
.finder-match-action a{
	display:grid;
	place-items:center;
	border:1px solid var(--line);
	border-radius:50%;
	width:29px;
	height:29px;
	transition:background .2s,color .2s;
}
.finder-match-action a:hover{ background:var(--rust); color:#fff; }
.finder-match-action button{
	border:1px solid var(--line);
	min-width:54px;
	height:29px;
	color:var(--deep);
	cursor:pointer;
	letter-spacing:.08em;
	background:transparent;
	border-radius:100px;
	padding:0 8px;
	font-size:7px;
	font-weight:800;
}
.finder-match-action button.active{ border-color:var(--acid); background:var(--acid); }

.finder-no-match{
	display:grid;
	place-items:center;
	align-content:center;
	text-align:center;
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
	min-height:324px;
	padding:55px 20px;
}
.finder-no-match strong{ font:900 32px "Interstate Cond",sans-serif; }
.finder-no-match p{ opacity:.6; font-size:11px; }
.finder-no-match button{
	cursor:pointer;
	color:var(--rust);
	text-transform:uppercase;
	background:transparent;
	border:0;
	border-bottom:1px solid;
	font-size:8px;
	font-weight:700;
}

.finder-book{
	display:flex;
	justify-content:space-between;
	align-items:center;
	background:var(--acid);
	letter-spacing:.1em;
	text-transform:uppercase;
	border-radius:100px;
	min-height:48px;
	margin-top:13px;
	padding:0 17px;
	font-size:8px;
	font-weight:700;
	transition:background .2s,color .2s;
}
.finder-book:hover{ background:var(--rust); color:#fff; }
.finder-book span{ font-size:14px; }

/* "picked" / saved items list, shown below the match list */
.finder-picked{
	display:grid;
	grid-template-columns:auto 1fr auto;
	align-items:center;
	gap:10px;
	color:var(--deep);
	background:#e8f6f9;
	margin-top:10px;
	padding:9px 12px;
}
.finder-picked strong{ color:var(--rust); letter-spacing:.1em; font-size:8px; }
.finder-picked span{ min-width:0; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.finder-picked button{
	color:var(--deep);
	cursor:pointer;
	text-transform:uppercase;
	background:transparent;
	border:0;
	border-bottom:1px solid;
	font-size:7px;
	font-weight:700;
}

.finder-disclaimer{ color:#08253d7a; margin:11px 0 0; font-size:7px; line-height:1.45; }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
	.finder-app{ grid-template-columns:.62fr 1fr 1fr; padding:24px 18px; }
	.finder-intro > p:not(.eyebrow){ margin-left:0; }
	.finder-options button small{ display:none; }
	.finder-options button{ grid-template-columns:24px 1fr 25px; }
}

@media (max-width:900px){
	.finder-app{ display:block; background:#e8f6f9; min-height:0; padding:22px 14px 45px; }
	.finder-intro{ min-height:0; padding:22px 8px 28px; }
	.finder-intro .eyebrow{ margin-bottom:24px; }
	.finder-intro h1{ font-size:clamp(62px,20vw,88px); }
	.finder-intro > p:not(.eyebrow){ margin-top:25px; }
	.finder-paths{ grid-template-columns:1fr 1fr; margin-top:28px; }
	.finder-safety{ margin-top:26px; }
	.finder-workspace{ padding:20px 16px; }
	.finder-options button{ grid-template-columns:25px 1fr 24px; min-height:62px; }
	.finder-options button strong{ font-size:23px; }
	.finder-results{ margin-top:14px; padding:25px 17px 18px; }
	.finder-results h2{ font-size:54px; }
	.finder-match-list article{ grid-template-columns:62px 1fr auto; }
	.finder-match-image{ width:58px; }
	.finder-match-list article h3{ font-size:24px; }
}

@media (prefers-reduced-motion:reduce){
	.finder-app *{ transition:none !important; animation:none !important; }
}