/* ========================================================================
   Find & Bind · browse.css
   - Public combined browsing for seek requests and owner listings
   - Responsive filters, Grid/Rows layouts, pagination, and Save Search modal
   ======================================================================== */

.browse-main{
	min-height:calc(100vh - 64px);
	background:
		radial-gradient(70% 70% at 100% 0, rgba(0,161,20,.06), transparent 42%),
		radial-gradient(65% 65% at 0 15%, rgba(225,6,0,.05), transparent 42%),
		var(--gray);
}

.browse-main > .wrap{
	padding:24px 0 44px;
}

/* Page introduction */
.browse-hero{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:22px;
	padding:24px;
	margin-bottom:12px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:18px;
	box-shadow:var(--shadow);
}

.browse-eyebrow{
	margin:0 0 5px;
	color:var(--red-special);
	font-size:13px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.browse-hero h1{
	margin:0;
	color:var(--navy);
	font-size:clamp(25px, 4vw, 36px);
	line-height:1.15;
}

.browse-hero__copy > p:last-child{
	margin:7px 0 0;
	color:var(--muted);
	font-size:15px;
}

.browse-hero__actions{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:10px;
	flex-wrap:wrap;
}

.browse-hero__actions .btn,
.browse-card__actions .btn,
.browse-filter-actions .btn,
.browse-modal__actions .btn,
.browse-empty .btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	font-weight:700;
}

/* Route messages and breadcrumbs */
.browse-alert{
	display:flex;
	align-items:center;
	gap:9px;
	padding:12px 14px;
	margin-bottom:12px;
	border-radius:12px;
	font-weight:700;
}

.browse-alert--error{
	color:#b91c1c;
	background:#fef2f2;
	border:1px solid #fecaca;
}

.browse-breadcrumbs{
	display:flex;
	align-items:center;
	gap:8px;
	overflow-x:auto;
	padding:8px 2px 12px;
	color:var(--muted);
	font-size:13px;
	white-space:nowrap;
}

.browse-breadcrumbs a{
	color:var(--muted);
	text-decoration:none;
}

.browse-breadcrumbs a:hover{
	color:var(--red);
}

.browse-breadcrumbs i{
	font-size:9px;
}

/* Type tabs and Save Search */
.browse-type-bar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	padding:12px;
	margin-bottom:14px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	box-shadow:var(--shadow);
}

.browse-tabs{
	display:flex;
	align-items:center;
	gap:7px;
	overflow-x:auto;
	padding:1px;
}

.browse-tab{
	display:inline-flex;
	align-items:center;
	gap:8px;
	min-height:40px;
	padding:8px 12px;
	border:1px solid var(--line);
	border-radius:11px;
	background:#f8fafc;
	color:var(--ink);
	font-weight:700;
	text-decoration:none;
	white-space:nowrap;
	cursor:pointer;
	transition:
			background .15s ease,
			border-color .15s ease,
			color .15s ease,
			box-shadow .15s ease;
}

.browse-tab:hover{
	background:#f1f5f9;
}

.browse-tab:focus-visible{
	outline:3px solid rgba(15,27,61,.22);
	outline-offset:2px;
}

/*
	The selected post-type tab uses one common active style,
	matching the behavior of the My Posts page.
*/
.browse-tab.is-active{
	background:var(--navy);
	border-color:var(--navy);
	color:#fff;
}

/*
	Shared count badge.
*/
.browse-tab > span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:24px;
	height:24px;
	padding:0 7px;
	border-radius:999px;
	background:#e5e7eb;
	color:#374151;
	font-size:12px;
	font-weight:700;
	line-height:1;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
}

/*
	The All count follows the active tab appearance.
*/
.browse-tab.is-active > span{
	background:rgba(255,255,255,.18);
	color:#fff;
}

/*
	Request and Listing counters retain the Find & Bind team colors.
*/
.browse-tab--request > span,
.browse-tab--request.is-active > span{
	background:var(--red-dark);
	color:#fff;
}

.browse-tab--listing > span,
.browse-tab--listing.is-active > span{
	background:var(--green-dark);
	color:#fff;
}

.browse-save-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	min-height:40px;
	background:#fff;
	color:var(--navy);
	border-color:#cbd5e1;
	font-weight:700;
	white-space:nowrap;
}

.browse-save-btn:hover{
	background:#f1f5f9;
	border-color:#94a3b8;
}

.browse-message{
	display:none;
	margin:0 0 14px;
	padding:11px 13px;
	border-radius:12px;
	font-weight:700;
}

.browse-message.is-success{
	display:block;
	color:#047857;
	background:#ecfdf5;
	border:1px solid #a7f3d0;
}

.browse-message.is-error{
	display:block;
	color:#b91c1c;
	background:#fef2f2;
	border:1px solid #fecaca;
}

/* Main filter/results shell */
.browse-shell{
	display:grid;
	grid-template-columns:275px minmax(0, 1fr);
	align-items:start;
	gap:14px;
}

.browse-filters{
	position:sticky;
	top:80px;
	overflow-anchor:none;
	padding:16px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:17px;
	box-shadow:var(--shadow);
}

.browse-filters__header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding-bottom:12px;
	margin-bottom:13px;
	border-bottom:1px solid var(--line);
}

.browse-filters__header p{
	margin:0 0 2px;
	color:var(--red-special);
	font-size:11px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.browse-filters__header h2{
	margin:0;
	color:var(--navy);
	font-size:20px;
	line-height:1.15;
}

.browse-filter-close{
	display:none;
	place-items:center;
	width:36px;
	height:36px;
	padding:0;
	border:1px solid var(--line);
	border-radius:10px;
	background:#fff;
	color:var(--ink);
	cursor:pointer;
}

.browse-field{
	min-width:0;
	margin-bottom:13px;
}

.browse-field label,
.browse-fieldset legend,
.browse-modal label{
	display:block;
	margin-bottom:6px;
	color:var(--ink);
	font-size:13px;
	font-weight:700;
}

.browse-field input,
.browse-field select,
.browse-modal input{
	width:100%;
	height:44px;
	padding:0 11px;
	border:1px solid var(--line);
	border-radius:11px;
	background:#fff;
	color:var(--ink);
	font:inherit;
	transition:border-color .15s ease, box-shadow .15s ease;
}

.browse-field input:focus,
.browse-field select:focus,
.browse-modal input:focus{
	outline:0;
	border-color:#94a3b8;
	box-shadow:0 0 0 3px rgba(148,163,184,.18);
}

.browse-input-icon{
	position:relative;
}

.browse-input-icon > i{
	position:absolute;
	left:12px;
	top:50%;
	transform:translateY(-50%);
	color:var(--muted);
	pointer-events:none;
}

.browse-input-icon input{
	padding-left:36px;
}

.browse-field-row{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:9px;
}

.browse-fieldset{
	padding:12px;
	margin:0 0 13px;
	border:1px solid var(--line);
	border-radius:12px;
}

.browse-fieldset legend{
	padding:0 5px;
}

.browse-fieldset .browse-field{
	margin-bottom:0;
}

.browse-filter-actions{
	display:grid;
	grid-template-columns:minmax(0, 1fr) auto;
	gap:8px;
	padding-top:2px;
}

.browse-filter-actions .btn{
	min-height:42px;
}

.browse-clear-btn{
	background:#fff;
	color:var(--ink);
	border-color:#cbd5e1;
}

.browse-clear-btn:hover{
	background:#f8fafc;
}

.browse-results-column{
	min-width:0;
}

/* Results toolbar */
.browse-toolbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:12px;
	margin-bottom:14px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	box-shadow:var(--shadow);
}

.browse-result-summary{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0;
}

.browse-result-summary strong{
	display:block;
	color:var(--ink);
	font-size:15px;
	line-height:1.25;
}

.browse-result-summary span{
	display:block;
	margin-top:2px;
	color:var(--muted);
	font-size:12px;
}

.browse-mobile-filter-btn{
	display:none;
	align-items:center;
	justify-content:center;
	gap:7px;
	min-height:40px;
	padding:8px 11px;
	border:1px solid var(--line);
	border-radius:10px;
	background:#fff;
	color:var(--ink);
	font:inherit;
	font-weight:700;
	cursor:pointer;
}

.browse-toolbar__controls{
	display:flex;
	align-items:center;
	gap:8px;
}

.browse-sort-wrap select{
	height:40px;
	padding:0 34px 0 10px;
	border:1px solid var(--line);
	border-radius:10px;
	background:#fff;
	color:var(--ink);
	font:inherit;
	font-weight:600;
	cursor:pointer;
}

.browse-layout-switch{
	display:inline-flex;
	align-items:center;
	padding:3px;
	border:1px solid var(--line);
	border-radius:11px;
	background:#f8fafc;
}

.browse-layout-btn{
	display:inline-grid;
	place-items:center;
	width:36px;
	height:34px;
	padding:0;
	border:0;
	border-radius:8px;
	background:transparent;
	color:var(--muted);
	font-size:15px;
	cursor:pointer;
}

.browse-layout-btn:hover{
	background:#e5e7eb;
	color:var(--navy);
}

.browse-layout-btn.is-active{
	background:var(--navy);
	color:#fff;
	box-shadow:0 2px 7px rgba(17,24,39,.18);
}

.browse-layout-btn:focus-visible{
	outline:2px solid var(--navy);
	outline-offset:2px;
}

/* Result cards */
.browse-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:14px;
}

.browse-card{
	display:flex;
	flex-direction:column;
	min-width:0;
	overflow:hidden;
	background:#fff;
	border:1px solid var(--line);
	border-radius:17px;
	box-shadow:var(--shadow);
	transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.browse-card:hover{
	transform:translateY(-2px);
	box-shadow:0 10px 26px rgba(17,24,39,.12);
}

.browse-card--request:hover{
	border-color:#fecaca;
}

.browse-card--listing:hover{
	border-color:#a7f3d0;
}

.browse-card__media{
	position:relative;
	display:block;
	height:175px;
	overflow:hidden;
	background:#eef2f7;
	text-decoration:none;
}

.browse-card__media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .25s ease;
}

.browse-card:hover .browse-card__media img{
	transform:scale(1.025);
}

/*
	Display the fallback icon like the My Posts placeholder:
	centered both horizontally and vertically across the media area.
*/
.browse-card__placeholder{
	display:grid;
	place-items:center;
	width:100%;
	height:100%;
	font-size:39px;
}

.browse-card--request .browse-card__placeholder{
	color:#dc2626;
	background:linear-gradient(135deg, #fff1f2, #fee2e2);
}

.browse-card--listing .browse-card__placeholder{
	color:#059669;
	background:linear-gradient(135deg, #ecfdf5, #d1fae5);
}

.browse-type-badge,
.browse-media-count{
	position:absolute;
	top:11px;
	display:inline-flex;
	align-items:center;
	min-height:27px;
	padding:5px 9px;
	border-radius:999px;
	font-size:12px;
	font-weight:700;
	box-shadow:0 4px 12px rgba(17,24,39,.12);
}

.browse-type-badge{
	left:11px;
}

.browse-card--request .browse-type-badge{
	color:#b91c1c;
	background:rgba(254,242,242,.94);
	border:1px solid #fecaca;
}

.browse-card--listing .browse-type-badge{
	color:#047857;
	background:rgba(236,253,245,.94);
	border:1px solid #a7f3d0;
}

.browse-media-count{
	right:11px;
	gap:5px;
	color:#fff;
	background:rgba(15,23,42,.76);
	border:1px solid rgba(255,255,255,.22);
}

.browse-card__body{
	display:flex;
	flex:1;
	flex-direction:column;
	padding:14px;
}

.browse-card__heading{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-bottom:8px;
}

.browse-card__category{
	min-width:0;
	overflow:hidden;
	color:var(--muted);
	font-size:12px;
	font-weight:700;
	text-decoration:none;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.browse-card__category:hover{
	color:var(--red);
}

.browse-card__heading time{
	color:var(--muted);
	font-size:11px;
	white-space:nowrap;
}

.browse-card__title{
	display:-webkit-box;
	overflow:hidden;
	margin:0 0 6px;
	font-size:18px;
	line-height:1.35;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}

.browse-card__title a{
	color:var(--navy);
	text-decoration:none;
}

.browse-card__title a:hover{
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:3px;
}

.browse-card__owner{
	display:flex;
	align-items:center;
	gap:6px;
	margin:0 0 7px;
	color:var(--green-grass);
	font-size:13px;
	font-weight:700;
}

.browse-card__description{
	display:-webkit-box;
	overflow:hidden;
	min-height:64px;
	margin:0 0 12px;
	color:#4b5563;
	line-height:1.5;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
}

.browse-card__meta{
	display:flex;
	flex-direction:column;
	gap:7px;
	margin-top:auto;
	padding-top:2px;
}

.browse-card__meta > span{
	display:flex;
	align-items:flex-start;
	gap:7px;
	min-width:0;
	color:#374151;
	font-size:13px;
}

.browse-card__meta i{
	width:15px;
	margin-top:4px;
	color:var(--muted);
	text-align:center;
	flex:0 0 15px;
}

.browse-card--request .browse-card__meta strong{
	color:var(--red-special);
}

.browse-card--listing .browse-card__meta strong{
	color:var(--green-grass);
}

.browse-card__details{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
	padding-top:12px;
	margin-top:12px;
	border-top:1px solid var(--line);
	color:var(--muted);
	font-size:12px;
	font-weight:700;
}

.browse-card__details span{
	display:inline-flex;
	align-items:center;
	gap:5px;
}

.browse-card__actions{
	display:flex;
	align-items:center;
	padding:12px 14px 14px;
	border-top:1px solid var(--line);
	background:#fafbfc;
}

.browse-card__actions .btn{
	width:100%;
	min-height:40px;
}

.browse-request-btn{
	background:var(--red);
	color:#fff;
	border-color:var(--red-dark);
}

.browse-listing-btn{
	background:var(--green);
	color:#fff;
	border-color:var(--green-dark);
}

.browse-request-btn:hover,
.browse-listing-btn:hover{
	filter:brightness(1.06);
}

/* Rows layout */
[data-browse-layout="rows"] .browse-grid{
	grid-template-columns:1fr;
	gap:10px;
}

/*
	Rows view must explicitly become a CSS Grid.

	The normal card is flex-based; grid-template-columns does nothing
	unless display:grid is declared here.
*/
[data-browse-layout="rows"] .browse-card{
	display:grid;
	grid-template-columns:220px minmax(0, 1fr) 150px;
	align-items:stretch;
	height:220px;
	min-height:220px;
	max-height:220px;
}

[data-browse-layout="rows"] .browse-card:hover{
	transform:translateY(-1px);
}

[data-browse-layout="rows"] .browse-card__media{
	height:100%;
	min-height:0;
}

[data-browse-layout="rows"] .browse-card__body{
	min-width:0;
	height:100%;
	overflow:hidden;
	padding:14px;
}

[data-browse-layout="rows"] .browse-card__heading{
	margin-bottom:5px;
}

[data-browse-layout="rows"] .browse-card__title{
	margin-bottom:4px;
	-webkit-line-clamp:1;
}

[data-browse-layout="rows"] .browse-card__owner{
	overflow:hidden;
	margin-bottom:4px;
	text-overflow:ellipsis;
	white-space:nowrap;
}

/*
	Rows view uses a compact one-line excerpt so the metadata and
	detail rows remain visible inside the fixed-height card.
*/
[data-browse-layout="rows"] .browse-card__description{
	min-height:0;
	margin-bottom:7px;
	-webkit-line-clamp:1;
}

/*
	Show amount and location in two columns in Rows view.
*/
[data-browse-layout="rows"] .browse-card__meta{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:5px 18px;
	margin-top:0;
	padding-top:0;
}

[data-browse-layout="rows"] .browse-card__meta > span{
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

[data-browse-layout="rows"] .browse-card__details{
	flex-wrap:nowrap;
	overflow:hidden;
	padding-top:7px;
	margin-top:auto;
	white-space:nowrap;
}

[data-browse-layout="rows"] .browse-card__details span{
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

[data-browse-layout="rows"] .browse-card__actions{
	align-items:stretch;
	justify-content:center;
	height:100%;
	padding:12px;
	border-top:0;
	border-left:1px solid var(--line);
}

/* Empty results */
.browse-empty{
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	min-height:360px;
	padding:32px 18px;
	text-align:center;
	background:#fff;
	border:1px dashed #cbd5e1;
	border-radius:17px;
}

.browse-empty__icon{
	place-items:center;
	width:66px;
	height:66px;
	margin-bottom:13px;
	border-radius:18px;
	background:#f1f5f9;
	color:var(--navy);
	font-size:26px;
}

.browse-empty h2{
	margin:0;
	color:var(--navy);
	font-size:22px;
}

.browse-empty p{
	max-width:520px;
	margin:7px 0 16px;
	color:var(--muted);
}

/* Pagination */
.browse-pagination{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	flex-wrap:wrap;
	padding-top:20px;
}

.browse-page{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:40px;
	height:40px;
	padding:0 11px;
	border:1px solid var(--line);
	border-radius:10px;
	background:#fff;
	color:var(--ink);
	font-weight:700;
	text-decoration:none;
}

.browse-page:hover{
	background:#f1f5f9;
	border-color:#cbd5e1;
}

.browse-page.is-active{
	background:var(--navy);
	border-color:var(--navy);
	color:#fff;
}

.browse-page--nav{
	gap:7px;
}

.browse-page--ellipsis{
	border-color:transparent;
	background:transparent;
	cursor:default;
}

/* Mobile filter overlay */
.browse-filter-overlay{
	display:none;
	position:fixed;
	inset:0;
	z-index:190;
	background:rgba(15,23,42,.56);
	backdrop-filter:blur(2px);
}

body.browse-filter-open{
	overflow:hidden;
}

/* Save Search modal */
.browse-modal.is-hidden{
	display:none;
}

.browse-modal{
	position:fixed;
	inset:0;
	z-index:1000;
	display:grid;
	place-items:center;
	padding:16px;
}

.browse-modal__overlay{
	position:absolute;
	inset:0;
	background:rgba(15,23,42,.62);
	backdrop-filter:blur(2px);
}

.browse-modal__dialog{
	position:relative;
	z-index:1;
	width:min(500px, 100%);
	padding:24px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:18px;
	box-shadow:0 24px 65px rgba(0,0,0,.25);
}

.browse-modal__close{
	position:absolute;
	right:10px;
	top:10px;
	display:grid;
	place-items:center;
	width:36px;
	height:36px;
	border:1px solid var(--line);
	border-radius:10px;
	background:#fff;
	color:var(--ink);
	cursor:pointer;
}

.browse-modal__icon{
	display:grid;
	place-items:center;
	width:58px;
	height:58px;
	margin:0 auto 12px;
	border-radius:16px;
	background:#eff6ff;
	border:1px solid #bfdbfe;
	color:#1d4ed8;
	font-size:23px;
}

.browse-modal h2{
	margin:0;
	color:var(--navy);
	font-size:23px;
	text-align:center;
}

.browse-modal__dialog > p{
	margin:8px auto 18px;
	max-width:420px;
	color:var(--muted);
	text-align:center;
}

.browse-modal__summary{
	display:flex;
	align-items:center;
	gap:7px;
	flex-wrap:wrap;
	padding:11px;
	margin-top:12px;
	border:1px solid var(--line);
	border-radius:12px;
	background:#f8fafc;
}

.browse-modal__summary > *{
	display:inline-flex;
	align-items:center;
	min-height:27px;
	padding:4px 8px;
	border-radius:999px;
	background:#fff;
	border:1px solid var(--line);
	color:var(--muted);
	font-size:12px;
}

.browse-modal__summary strong{
	color:var(--muted);
}

.browse-modal__actions{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:9px;
	padding-top:18px;
}

.browse-modal-cancel{
	background:#fff;
	color:var(--ink);
	border-color:#cbd5e1;
}

.browse-modal .is-loading{
	cursor:wait;
	opacity:.72;
}

body.browse-modal-open{
	overflow:hidden;
}

@media (max-width:1180px){
	.browse-grid{
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}

	[data-browse-layout="rows"] .browse-grid{
		grid-template-columns:1fr;
	}

	[data-browse-layout="rows"] .browse-card{
		grid-template-columns:190px minmax(0, 1fr) 145px;
	}
}

@media (max-width:960px){
	.browse-shell{
		grid-template-columns:1fr;
	}

	.browse-filters{
		position:fixed;
		left:0;
		top:0;
		bottom:0;
		z-index:200;
		width:min(360px, 92vw);
		overflow-y:auto;
		border-radius:0 18px 18px 0;
		transform:translateX(-105%);
		transition:transform .2s ease;
	}

	body.browse-filter-open .browse-filters{
		transform:translateX(0);
	}

	body.browse-filter-open .browse-filter-overlay{
		display:block;
	}

	.browse-filter-close{
	}

	.browse-mobile-filter-btn{
		display:inline-flex;
	}
}

@media (max-width:760px){
	.browse-main > .wrap{
		padding-top:14px;
	}

	.browse-hero{
		align-items:flex-start;
		flex-direction:column;
		padding:18px;
	}

	.browse-hero__actions{
		justify-content:flex-start;
		width:100%;
	}

	.browse-type-bar{
		align-items:stretch;
		flex-direction:column;
	}

	.browse-save-btn{
		align-self:flex-start;
	}

	.browse-toolbar{
		align-items:flex-start;
		flex-direction:column;
	}

	.browse-toolbar__controls{
		justify-content:space-between;
		width:100%;
	}

	.browse-sort-wrap{
		flex:1;
	}

	.browse-sort-wrap select{
		width:100%;
	}

	.browse-grid{
		grid-template-columns:1fr;
	}

	[data-browse-layout="rows"] .browse-card{
		grid-template-columns:170px minmax(0, 1fr);
		grid-template-rows:220px 54px;
		height:274px;
		min-height:274px;
		max-height:274px;
	}

	[data-browse-layout="rows"] .browse-card__actions{
		grid-column:1 / -1;
		height:54px;
		padding:7px 10px;
		border-top:1px solid var(--line);
		border-left:0;
	}

	.browse-modal__actions{
		align-items:stretch;
		flex-direction:column-reverse;
	}

	.browse-modal__actions .btn{
		width:100%;
	}
}

@media (max-width:620px){
	.browse-field-row{
		grid-template-columns:1fr;
	}

	.browse-hero__actions .btn{
		flex:1 1 100%;
	}

	.browse-tabs{
		width:100%;
	}

	.browse-tab{
		flex:1 0 auto;
		justify-content:center;
	}

	.browse-layout-switch{
		display:none;
	}

	[data-browse-layout="rows"] .browse-card{
		display:flex;
		flex-direction:column;
		height:auto;
		min-height:0;
		max-height:none;
	}

	[data-browse-layout="rows"] .browse-card__media{
		height:190px;
	}

	[data-browse-layout="rows"] .browse-card__body{
		height:auto;
		overflow:visible;
	}

	[data-browse-layout="rows"] .browse-card__title{
		-webkit-line-clamp:2;
	}

	[data-browse-layout="rows"] .browse-card__description{
		min-height:64px;
		-webkit-line-clamp:3;
	}

	[data-browse-layout="rows"] .browse-card__meta{
		display:flex;
		flex-direction:column;
		gap:7px;
		margin-top:auto;
	}

	[data-browse-layout="rows"] .browse-card__meta > span,
	[data-browse-layout="rows"] .browse-card__details,
	[data-browse-layout="rows"] .browse-card__details span{
		overflow:visible;
		text-overflow:clip;
		white-space:normal;
	}

	[data-browse-layout="rows"] .browse-card__details{
		flex-wrap:wrap;
		padding-top:12px;
		margin-top:12px;
	}

	[data-browse-layout="rows"] .browse-card__actions{
		display:flex;
		height:auto;
		padding:12px 14px 14px;
	}
}

@media (max-width:480px){
	.browse-page--nav{
		font-size:0;
	}

	.browse-page--nav i{
		font-size:12px;
	}
}

/* Dark theme */
[data-theme="dark"] .browse-main{
	background:
		radial-gradient(70% 70% at 100% 0, rgba(0,161,20,.06), transparent 42%),
		radial-gradient(65% 65% at 0 15%, rgba(225,6,0,.05), transparent 42%),
		#0c111b;
}

[data-theme="dark"] .browse-hero,
[data-theme="dark"] .browse-type-bar,
[data-theme="dark"] .browse-filters,
[data-theme="dark"] .browse-toolbar,
[data-theme="dark"] .browse-card,
[data-theme="dark"] .browse-empty,
[data-theme="dark"] .browse-modal__dialog{
	background:#0e1420;
	border-color:var(--line);
	box-shadow:var(--shadow);
}

[data-theme="dark"] .browse-tab{
	background:#0f172a;
	border-color:#1f2937;
	color:#e5e7eb;
}

[data-theme="dark"] .browse-tab:hover{
	background:#0b1220;
}

/*
	Use the same selected-tab style as My Posts in dark mode.
*/
[data-theme="dark"] .browse-tab.is-active{
	background:#c7d2fe;
	border-color:#c7d2fe;
	color:#0f172a;
}

[data-theme="dark"] .browse-tab.is-active > span{
	background:rgba(15,23,42,.16);
	color:#0f172a;
}

/*
	Preserve the request/listing team-colored counters.
*/
[data-theme="dark"] .browse-tab--request > span,
[data-theme="dark"] .browse-tab--request.is-active > span{
	background:var(--red-dark);
	color:#fff;
}

[data-theme="dark"] .browse-tab--listing > span,
[data-theme="dark"] .browse-tab--listing.is-active > span{
	background:var(--green-dark);
	color:#fff;
}

[data-theme="dark"] .browse-save-btn,
[data-theme="dark"] .browse-mobile-filter-btn,
[data-theme="dark"] .browse-filter-close,
[data-theme="dark"] .browse-field input,
[data-theme="dark"] .browse-field select,
[data-theme="dark"] .browse-sort-wrap select,
[data-theme="dark"] .browse-clear-btn,
[data-theme="dark"] .browse-page,
[data-theme="dark"] .browse-modal input,
[data-theme="dark"] .browse-modal__close,
[data-theme="dark"] .browse-modal-cancel{
	background:#0b1220;
	border-color:var(--line);
	color:#e5e7eb;
}

[data-theme="dark"] .browse-save-btn:hover,
[data-theme="dark"] .browse-clear-btn:hover,
[data-theme="dark"] .browse-page:hover{
	background:#111827;
}

[data-theme="dark"] .browse-layout-switch{
	background:#0b1220;
	border-color:var(--line);
}

[data-theme="dark"] .browse-layout-btn{
	color:#94a3b8;
}

[data-theme="dark"] .browse-layout-btn:hover{
	background:#111827;
	color:#e5e7eb;
}

[data-theme="dark"] .browse-layout-btn.is-active,
[data-theme="dark"] .browse-page.is-active{
	background:#c7d2fe;
	border-color:#c7d2fe;
	color:#0f172a;
}

[data-theme="dark"] .browse-card__description,
[data-theme="dark"] .browse-card__meta > span,
[data-theme="dark"] .browse-modal__dialog > p{
	color:#cbd5e1;
}

[data-theme="dark"] .browse-card__actions{
	background:#0b1220;
	border-top-color:var(--line);
}

[data-theme="dark"][data-browse-layout="rows"] .browse-card__actions{
	border-left-color:var(--line);
}

[data-theme="dark"] .browse-card--request .browse-card__placeholder{
	color:#fca5a5;
	background:linear-gradient(135deg, #250d12, #2a0b0b);
}

[data-theme="dark"] .browse-card--listing .browse-card__placeholder{
	color:#6ee7b7;
	background:linear-gradient(135deg, #06281d, #0f2316);
}

[data-theme="dark"] .browse-card--request .browse-type-badge{
	color:#fca5a5;
	background:rgba(42,11,11,.94);
	border-color:#7f1d1d;
}

[data-theme="dark"] .browse-card--listing .browse-type-badge{
	color:#6ee7b7;
	background:rgba(6,40,29,.94);
	border-color:#14532d;
}

[data-theme="dark"] .browse-modal__summary{
	background:#0b1220;
	border-color:var(--line);
}

[data-theme="dark"] .browse-modal__summary > *{
	background:#111827;
	border-color:#334155;
}

[data-theme="dark"] .browse-empty{
	border-color:#334155;
}

[data-theme="dark"] .browse-empty__icon{
	background:#111827;
	color:#c7d2fe;
}

[data-theme="dark"] .browse-message.is-success{
	color:#6ee7b7;
	background:#06281d;
	border-color:#14532d;
}

[data-theme="dark"] .browse-message.is-error,
[data-theme="dark"] .browse-alert--error{
	color:#fca5a5;
	background:#2a0b0b;
	border-color:#7f1d1d;
}

/*
	Keep important Browse labels and headings readable in dark mode.
*/
[data-theme="dark"] .browse-field label,
[data-theme="dark"] .browse-fieldset legend,
[data-theme="dark"] .browse-modal label,
[data-theme="dark"] .browse-result-summary strong,
[data-theme="dark"] .browse-filters__header h2{
	color:#e5e7eb;
}
/* ========================================================================
   Multi-category / multi-country filtering
   ======================================================================== */
.browse-multi-field{
	position:relative;
}

.browse-multi-label-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-bottom:6px;
}

.browse-multi-label-row label{
	margin:0;
}

.browse-multi-label-row > span{
	color:var(--muted);
	font-size:11px;
	font-weight:700;
	white-space:nowrap;
}

.browse-multi-select{
	position:relative;
}

.browse-multi-trigger{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	width:100%;
	min-height:44px;
	padding:0 11px;
	border:1px solid var(--line);
	border-radius:11px;
	background:#fff;
	color:var(--ink);
	font:inherit;
	font-weight:600;
	text-align:left;
	cursor:pointer;
	transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.browse-multi-trigger:hover{
	background:#f8fafc;
}

.browse-multi-trigger:focus-visible,
.browse-multi-trigger[aria-expanded="true"]{
	outline:0;
	border-color:#94a3b8;
	box-shadow:0 0 0 3px rgba(148,163,184,.18);
}

.browse-multi-trigger[aria-expanded="true"] > i{
	transform:rotate(180deg);
}

.browse-multi-trigger__text{
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.browse-multi-trigger > i{
	color:var(--muted);
	font-size:11px;
	transition:transform .15s ease;
}

.browse-multi-panel{
	position:absolute;
	left:0;
	overflow-anchor:none;
	top:calc(100% + 7px);
	z-index:70;
	width:min(430px, calc(100vw - 40px));
	padding:12px;
	border:1px solid var(--line);
	border-radius:14px;
	background:#fff;
	box-shadow:0 20px 45px rgba(15,23,42,.18);
}

.browse-multi-panel.is-hidden{
	display:none;
}

.browse-multi-panel__head{
	display:flex;
	flex-direction:column;
	gap:3px;
	padding:2px 2px 10px;
}

.browse-multi-panel__head strong{
	color:var(--navy);
	font-size:14px;
}

.browse-multi-panel__head small{
	color:var(--muted);
	font-size:11px;
	line-height:1.4;
}

.browse-multi-search{
	position:relative;
	display:block;
	margin-bottom:9px !important;
}

.browse-multi-search > i{
	position:absolute;
	left:11px;
	top:50%;
	z-index:1;
	transform:translateY(-50%);
	color:var(--muted);
	font-size:13px;
	pointer-events:none;
}

.browse-multi-search input{
	height:40px !important;
	padding-left:34px !important;
}

.browse-multi-options{
	max-height:330px;
	overflow-y:auto;
	overscroll-behavior:contain;
	padding:2px;
}

.browse-multi-option{
	position:relative;
	display:grid !important;
	grid-template-columns:24px minmax(0, 1fr);
	align-items:center;
	gap:8px;
	min-height:44px;
	padding:6px 8px;
	margin:0 !important;
	border-radius:9px;
	cursor:pointer;
	transition:background .12s ease;
}

.browse-multi-option:hover{
	background:#f8fafc;
}

.browse-multi-option.is-filtered-out{
	display:none !important;
}

.browse-multi-option > input{
	position:absolute;
	left:8px;
	top:50%;
	z-index:2;
	width:22px !important;
	height:22px !important;
	margin:0;
	opacity:0;
	transform:translateY(-50%);
	cursor:pointer;
}

.browse-multi-option__check{
	display:grid;
	place-items:center;
	width:22px;
	height:22px;
	border:1px solid #cbd5e1;
	border-radius:6px;
	background:#fff;
	color:transparent;
	font-size:11px;
	transition:background .12s ease, border-color .12s ease, color .12s ease;
}

.browse-multi-option > input:checked + .browse-multi-option__check{
	background:var(--navy);
	border-color:var(--navy);
	color:#fff;
}

.browse-multi-option > input:focus-visible + .browse-multi-option__check{
	outline:3px solid rgba(15,27,61,.18);
	outline-offset:2px;
}

.browse-multi-option__text{
	display:flex;
	min-width:0;
	flex-direction:column;
	gap:1px;
	padding-left:calc(var(--browse-category-depth, 0) * 11px);
}

.browse-multi-option__text--country{
	padding-left:0;
}

.browse-multi-option__text strong{
	min-width:0;
	overflow:hidden;
	color:var(--ink);
	font-size:13px;
	font-weight:700;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.browse-multi-option__text small{
	min-width:0;
	overflow:hidden;
	color:var(--muted);
	font-size:10px;
	font-weight:500;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.browse-multi-panel__actions{
	display:grid;
	grid-template-columns:auto minmax(0, 1fr) auto;
	align-items:center;
	gap:8px;
	padding:10px 2px 0;
	margin-top:8px;
	border-top:1px solid var(--line);
}

.browse-multi-panel__actions > span{
	color:var(--muted);
	font-size:10px;
	font-weight:600;
	text-align:center;
}

.browse-multi-clear,
.browse-multi-done{
	min-height:34px;
	padding:6px 10px;
	border:1px solid var(--line);
	border-radius:8px;
	background:#fff;
	color:var(--ink);
	font:inherit;
	font-size:12px;
	font-weight:700;
	cursor:pointer;
}

.browse-multi-done{
	background:var(--navy);
	border-color:var(--navy);
	color:#fff;
}

.browse-selected-chips{
	display:flex;
	align-items:center;
	gap:5px;
	flex-wrap:wrap;
	padding-top:6px;
}

.browse-selected-chips:empty{
	display:none;
}

.browse-selected-chip{
	display:inline-flex;
	align-items:center;
	gap:5px;
	max-width:100%;
	min-height:27px;
	padding:4px 7px 4px 8px;
	border:1px solid #cbd5e1;
	border-radius:999px;
	background:#f8fafc;
	color:#334155;
	font:inherit;
	font-size:11px;
	font-weight:700;
	cursor:pointer;
}

.browse-selected-chip span{
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.browse-selected-chip i{
	font-size:9px;
}

.browse-selected-chip:hover{
	background:#eef2f7;
	border-color:#94a3b8;
}

/*
	Match selected Category and Country chips with the corresponding
	active-filter badges displayed above the Browse results.
*/
.browse-selected-chip[data-kind="category"]{
	border-color:#c7d2fe;
	background:#eef2ff;
	color:#3730a3;
}

.browse-selected-chip[data-kind="category"]:hover{
	border-color:#a5b4fc;
	background:#e0e7ff;
	color:#3730a3;
}

.browse-selected-chip[data-kind="country"]{
	border-color:#bae6fd;
	background:#f0f9ff;
	color:#0369a1;
}

.browse-selected-chip[data-kind="country"]:hover{
	border-color:#7dd3fc;
	background:#e0f2fe;
	color:#0369a1;
}

.browse-location-helper{
	display:none;
	align-items:flex-start;
	gap:6px;
	padding:8px 9px;
	margin:-5px 0 13px;
	border:1px solid #bfdbfe;
	border-radius:9px;
	background:#eff6ff;
	color:#1e40af;
	font-size:11px;
	font-weight:600;
	line-height:1.4;
}

.browse-location-helper.is-visible{
	display:flex;
}

.browse-field input:disabled{
	background:#f1f5f9;
	color:#94a3b8;
	cursor:not-allowed;
}

/* Active filter chips above the result grid. */
.browse-active-filters{
	display:flex;
	align-items:center;
	gap:6px;
	flex-wrap:wrap;
	padding:0 2px 12px;
}

.browse-active-filter{
	display:inline-flex;
	align-items:center;
	gap:6px;
	min-height:31px;
	padding:5px 9px;
	border:1px solid var(--line);
	border-radius:999px;
	background:#fff;
	color:#475569;
	font:inherit;
	font-size:11px;
	font-weight:700;
	cursor:pointer;
	box-shadow:0 2px 6px rgba(15,23,42,.04);
}

.browse-active-filter:hover{
	background:#f8fafc;
	border-color:#94a3b8;
}

.browse-active-filter--category{
	border-color:#c7d2fe;
	background:#eef2ff;
	color:#3730a3;
}

.browse-active-filter--country{
	border-color:#bae6fd;
	background:#f0f9ff;
	color:#0369a1;
}

.browse-active-filters__clear{
	color:var(--red);
	font-size:11px;
	font-weight:700;
	text-decoration:none;
}

.browse-active-filters__clear:hover{
	text-decoration:underline;
}

/* ========================================================================
   Save Search: explicit create-new / replace-existing workflow
   ======================================================================== */
.browse-modal__dialog--save{
	width:min(650px, 100%);
	max-height:min(820px, calc(100vh - 32px));
	overflow-y:auto;
}

.browse-save-existing-notice{
	display:flex;
	align-items:flex-start;
	gap:8px;
	padding:10px 11px;
	margin:0 0 14px;
	border:1px solid #bfdbfe;
	border-radius:11px;
	background:#eff6ff;
	color:#1e40af;
	font-size:12px;
	line-height:1.45;
}

.browse-save-mode-grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:9px;
	margin-bottom:15px;
}

.browse-save-mode-card{
	position:relative;
	display:flex;
	align-items:flex-start;
	gap:9px;
	padding:12px;
	border:1px solid var(--line);
	border-radius:12px;
	background:#fff;
	cursor:pointer;
	transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.browse-save-mode-card:hover{
	background:#f8fafc;
}

.browse-save-mode-card.is-active{
	border-color:#818cf8;
	background:#eef2ff;
	box-shadow:0 0 0 2px rgba(99,102,241,.10);
}

.browse-save-mode-card input{
	width:17px !important;
	height:17px !important;
	margin:2px 0 0;
	flex:0 0 17px;
}

.browse-save-mode-card span{
	display:flex;
	min-width:0;
	flex-direction:column;
	gap:2px;
}

.browse-save-mode-card strong{
	color:var(--ink);
	font-size:13px;
}

.browse-save-mode-card small{
	color:var(--muted);
	font-size:11px;
	font-weight:500;
	line-height:1.4;
}

/*
	Compact Save Search mode cards.

	The radio and title share the first row while the explanatory text
	uses a second row. The more-specific selector also overrides the
	generic ".browse-modal label { display:block; }" rule.
*/
.browse-modal label.browse-save-mode-card{
	display:grid;
	grid-template-columns:18px minmax(0, 1fr);
	grid-template-areas:
		"radio title"
		"description description";
	align-items:center;
	column-gap:9px;
	row-gap:4px;
	padding:10px 11px;
	margin:0;
}

.browse-save-mode-card > input{
	grid-area:radio;
	width:17px !important;
	height:17px !important;
	margin:0;
}

/*
	The wrapper itself does not need a layout box.

	This allows <strong> and <small> to participate directly
	in the parent card's CSS Grid.
*/
.browse-save-mode-card > span{
	display:contents;
}

.browse-save-mode-card strong{
	grid-area:title;
	align-self:center;
	font-size:13px;
	line-height:1.25;
}

.browse-save-mode-card small{
	grid-area:description;
	font-size:10px;
	line-height:1.35;
}

.browse-replace-area{
	padding:12px;
	margin-bottom:14px;
	border:1px solid var(--line);
	border-radius:12px;
	background:#f8fafc;
}

.browse-replace-area.is-hidden{
	display:none;
}

.browse-replace-area.has-error{
	border-color:#fca5a5;
	box-shadow:0 0 0 2px rgba(239,68,68,.08);
}

.browse-replace-area__header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-bottom:8px;
}

.browse-replace-area__header strong{
	color:var(--ink);
	font-size:13px;
}

.browse-replace-area__header span{
	color:var(--muted);
	font-size:10px;
}

.browse-existing-search-list{
	display:flex;
	max-height:145px;
	overflow-y:auto;
	flex-direction:column;
	gap:5px;
	padding:2px;
	margin-top:7px;
	overscroll-behavior:contain;
}

.browse-existing-search-option{
	display:grid !important;
	grid-template-columns:18px minmax(0, 1fr) auto;
	align-items:center;
	gap:8px;
	padding:7px 9px;
	margin:0 !important;
	border:1px solid var(--line);
	border-radius:10px;
	background:#fff;
	cursor:pointer;
}

.browse-existing-search-option.is-selected{
	border-color:#818cf8;
	background:#eef2ff;
}

.browse-existing-search-option.is-current{
	border-color:#86efac;
}

.browse-existing-search-option.is-filtered-out{
	display:none !important;
}

.browse-existing-search-option input{
	width:16px !important;
	height:16px !important;
	margin:0;
}

.browse-existing-search-option__copy{
	display:flex;
	min-width:0;
	flex-direction:column;
	gap:2px;
}

.browse-existing-search-option__copy strong,
.browse-existing-search-option__copy small{
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.browse-existing-search-option__copy strong{
	color:var(--ink);
	font-size:12px;
}

.browse-existing-search-option__copy small{
	color:var(--muted);
	font-size:10px;
	font-weight:500;
}

.browse-existing-search-option__badge{
	padding:3px 6px;
	border-radius:999px;
	background:#dcfce7;
	color:#166534;
	font-size:9px;
	font-weight:800;
	white-space:nowrap;
}

.browse-save-name-field{
	margin-top:3px;
}

.browse-modal__summary--current{
	margin-top:14px;
}

@media (max-width:960px){
	.browse-multi-panel{
		position:static;
		width:100%;
		margin-top:7px;
		box-shadow:none;
	}
}

@media (max-width:620px){
	.browse-save-mode-grid{
		grid-template-columns:1fr;
	}

	.browse-modal__dialog--save{
		padding:20px 16px;
	}

	.browse-existing-search-option{
		grid-template-columns:18px minmax(0, 1fr);
	}

	.browse-existing-search-option__badge{
		grid-column:2;
		justify-self:start;
	}
}

/* Dark theme additions for multi-selects and save workflow. */
[data-theme="dark"] .browse-multi-trigger,
[data-theme="dark"] .browse-multi-panel,
[data-theme="dark"] .browse-multi-option__check,
[data-theme="dark"] .browse-multi-clear,
[data-theme="dark"] .browse-selected-chip,
[data-theme="dark"] .browse-active-filter,
[data-theme="dark"] .browse-save-mode-card,
[data-theme="dark"] .browse-existing-search-option{
	background:#0b1220;
	border-color:var(--line);
	color:#e5e7eb;
}

[data-theme="dark"] .browse-multi-trigger:hover,
[data-theme="dark"] .browse-multi-option:hover,
[data-theme="dark"] .browse-selected-chip:hover,
[data-theme="dark"] .browse-active-filter:hover,
[data-theme="dark"] .browse-save-mode-card:hover{
	background:#111827;
}

[data-theme="dark"] .browse-multi-panel__head strong,
[data-theme="dark"] .browse-multi-option__text strong,
[data-theme="dark"] .browse-save-mode-card strong,
[data-theme="dark"] .browse-replace-area__header strong,
[data-theme="dark"] .browse-existing-search-option__copy strong{
	color:#e5e7eb;
}

[data-theme="dark"] .browse-multi-option > input:checked + .browse-multi-option__check,
[data-theme="dark"] .browse-multi-done{
	background:#c7d2fe;
	border-color:#c7d2fe;
	color:#0f172a;
}

/*
	Keep selected chips consistent with their result-filter badges
	in dark theme.
*/
[data-theme="dark"] .browse-selected-chip[data-kind="category"]{
	background:#172554;
	border-color:#3730a3;
	color:#c7d2fe;
}

[data-theme="dark"] .browse-selected-chip[data-kind="category"]:hover{
	background:#1e3a8a;
	border-color:#4f46e5;
	color:#e0e7ff;
}

[data-theme="dark"] .browse-selected-chip[data-kind="country"]{
	background:#082f49;
	border-color:#164e63;
	color:#bae6fd;
}

[data-theme="dark"] .browse-selected-chip[data-kind="country"]:hover{
	background:#0c4a6e;
	border-color:#0369a1;
	color:#e0f2fe;
}

[data-theme="dark"] .browse-location-helper,
[data-theme="dark"] .browse-save-existing-notice{
	background:#082f49;
	border-color:#164e63;
	color:#bae6fd;
}

[data-theme="dark"] .browse-field input:disabled{
	background:#111827;
	color:#64748b;
}

[data-theme="dark"] .browse-active-filter--category,
[data-theme="dark"] .browse-save-mode-card.is-active,
[data-theme="dark"] .browse-existing-search-option.is-selected{
	background:#172554;
	border-color:#3730a3;
	color:#c7d2fe;
}

[data-theme="dark"] .browse-active-filter--country{
	background:#082f49;
	border-color:#164e63;
	color:#bae6fd;
}

[data-theme="dark"] .browse-replace-area{
	background:#0b1220;
	border-color:var(--line);
}

[data-theme="dark"] .browse-existing-search-option__badge{
	background:#064e3b;
	color:#a7f3d0;
}

.browse-modal__empty-note{
	margin:4px 0 0;
	padding:12px;
	border:1px dashed #cbd5e1;
	border-radius:10px;
	color:var(--muted);
	font-size:12px;
	text-align:center;
}

[data-theme="dark"] .browse-modal__empty-note{
	border-color:#334155;
	color:#94a3b8;
}

.browse-existing-search-option.is-disabled{
	opacity:.5;
	cursor:not-allowed;
}

.browse-existing-search-option.is-disabled:hover{
	background:#fff;
}

[data-theme="dark"] .browse-existing-search-option.is-disabled:hover{
	background:#0b1220;
}

@media (max-width:960px){
	.browse-filter-close{
		display:grid;
	}
}

.browse-save-mode-card.is-disabled{
	opacity:.52;
	cursor:not-allowed;
}

.browse-save-mode-card.is-disabled:hover{
	background:#fff;
}

[data-theme="dark"] .browse-save-mode-card.is-disabled:hover{
	background:#0b1220;
}

/*
	Dark-theme checkbox state.

	The Font Awesome check icon exists inside every custom checkbox,
	so an unchecked checkbox must keep its icon transparent.
*/
[data-theme="dark"] .browse-multi-option__check{
	background:#0b1220;
	border-color:#334155;
	color:transparent;
}

/*
	Show the check only when the actual hidden checkbox is selected.
*/
[data-theme="dark"] .browse-multi-option > input:checked + .browse-multi-option__check{
	background:#c7d2fe;
	border-color:#c7d2fe;
	color:#0f172a;
}

/*
	Keep desktop filter popovers above Browse result cards.

	The popover belongs to the sticky filter sidebar, so raising only
	the popover itself is not always enough to escape the parent's
	stacking context.
*/
@media (min-width:961px){
	.browse-filters{
		z-index:100;
	}

	.browse-results-column{
		position:relative;
		z-index:1;
	}

	.browse-multi-panel{
		position:fixed;
		left:0;
		top:0;
		z-index:200;
		display:flex;
		box-sizing:border-box;
		max-height:calc(100vh - 32px);
		flex-direction:column;
	}

	.browse-multi-options{
		min-height:0;
		flex:1 1 auto;
	}
}

/*
	Make only the Save Search dialog more vertically efficient.
*/
.browse-modal__dialog--save{
	width:min(650px, 100%);
	max-height:calc(100vh - 24px);
	padding:18px 20px;
	overflow-y:auto;
}

.browse-modal__dialog--save .browse-modal__icon{
	width:48px;
	height:48px;
	margin-bottom:8px;
	font-size:20px;
}

.browse-modal__dialog--save h2{
	font-size:21px;
}

.browse-modal__dialog--save > p{
	margin:6px auto 12px;
	line-height:1.4;
}

.browse-save-mode-grid{
	gap:8px;
	margin-bottom:10px;
}

.browse-replace-area{
	padding:10px;
	margin-bottom:10px;
}

.browse-replace-area__header{
	margin-bottom:7px;
}

.browse-save-name-field{
	margin-top:0;
}

.browse-modal__summary--current{
	margin-top:10px;
}

/*
	Keep the primary Save Search action visible even when the modal
	has to scroll on a shorter display.
*/
.browse-modal__dialog--save .browse-modal__actions{
	position:sticky;
	bottom:0;
	z-index:5;
	margin-top:10px;
	padding:10px 0 2px;
	background:#fff;
	border-top:1px solid var(--line);
	box-shadow:0 -10px 18px rgba(15,23,42,.05);
}

[data-theme="dark"] .browse-modal__dialog--save .browse-modal__actions{
	background:#0e1420;
	border-top-color:var(--line);
	box-shadow:0 -10px 18px rgba(0,0,0,.18);
}