/* =========================================================
   One Nation Shopping Lists
   Brand tokens matching the rest of the site: primary green #186D42,
   cream background #F9F9F6, border #E3E3DD, Sora headings + DM Sans body.
   ========================================================= */

.onsl-wrap {
	font-family: "DM Sans", sans-serif;
	color: #333;
	max-width: 720px;
}

.onsl-btn {
	font-family: "DM Sans", sans-serif !important;
	font-weight: 600 !important;
	font-size: .9375rem !important;
	padding: .65rem 1.25rem !important;
	border-radius: .5rem !important;
	border: 1px solid transparent !important;
	cursor: pointer !important;
	transition: opacity .15s, background .15s !important;
	line-height: normal !important;
	text-decoration: none !important;
	display: inline-block !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.onsl-btn-primary {
	background: #186D42 !important;
	color: #fff !important;
}
.onsl-btn-primary:hover {
	opacity: .9 !important;
	background: #186D42 !important;
	color: #fff !important;
}
.onsl-btn-primary:disabled {
	background: #ccc !important;
	cursor: not-allowed !important;
	opacity: .7 !important;
}
.onsl-btn-outline {
	background: #fff !important;
	color: #186D42 !important;
	border-color: #186D42 !important;
}
.onsl-btn-outline:hover {
	background: rgba(24,109,66,.05) !important;
	color: #186D42 !important;
}

.onsl-empty-list {
	color: #888;
	font-size: .9375rem;
	padding: 1.5rem 0;
	text-align: center;
}

/* ---- Overview (list of lists) ---- */
.onsl-overview-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}
.onsl-overview-header h3 {
	font-family: "Sora", sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	margin: 0;
	color: #333;
}

.onsl-new-list-form {
	display: flex;
	gap: .6rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}
.onsl-new-list-name {
	flex: 1;
	min-width: 200px;
	padding: .65rem .9rem;
	border: 1px solid #E3E3DD;
	border-radius: .5rem;
	font-family: "DM Sans", sans-serif;
	font-size: .9375rem;
}
.onsl-new-list-name:focus {
	outline: none;
	border-color: #186D42;
}

.onsl-list-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.onsl-list-card-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	border: 1px solid #E3E3DD;
	border-radius: .75rem;
	padding: 1.1rem 1.4rem;
	text-decoration: none;
	color: #333;
	transition: border-color .15s;
}
.onsl-list-card-link:hover {
	border-color: #186D42;
}
.onsl-list-card-name {
	font-family: "Sora", sans-serif;
	font-weight: 700;
	font-size: 1.0625rem;
	color: #333;
}
.onsl-list-card-meta {
	font-size: .875rem;
	color: #888;
}

/* ---- List detail view ---- */
.onsl-detail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1.25rem;
}
.onsl-back-link {
	display: block;
	font-size: .875rem;
	color: #186D42;
	text-decoration: none;
	font-weight: 600;
	margin-bottom: .5rem;
	flex-basis: 100%;
}
.onsl-list-name {
	font-family: "Sora", sans-serif;
	font-weight: 700;
	font-size: 1.375rem;
	margin: 0;
	color: #333;
}

.onsl-open-search-btn {
	margin-bottom: 1.25rem;
}

.onsl-list-items {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.onsl-list-item,
.onsl-search-result {
	display: flex;
	align-items: center;
	gap: .9rem;
	background: #fff;
	border: 1px solid #E3E3DD;
	border-radius: .625rem;
	padding: .7rem .9rem;
}
.onsl-item-thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: .375rem;
	flex-shrink: 0;
	background: #F9F9F6;
}
.onsl-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.onsl-item-name {
	font-weight: 600;
	font-size: .9375rem;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.onsl-item-price {
	font-size: .8125rem;
	color: #186D42;
	font-weight: 600;
}
.onsl-item-qty {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
}
.onsl-qty-btn {
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	border: 1px solid #E3E3DD !important;
	background: #fff !important;
	color: #186D42 !important;
	font-size: 1rem !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.onsl-qty-btn:hover {
	border-color: #186D42 !important;
	background: #fff !important;
	color: #186D42 !important;
}
.onsl-qty-value {
	min-width: 1.25rem;
	text-align: center;
	font-weight: 600;
	font-size: .9375rem;
}
.onsl-item-remove {
	background: none !important;
	border: none !important;
	color: #999 !important;
	font-size: 1.25rem !important;
	line-height: 1 !important;
	cursor: pointer !important;
	flex-shrink: 0;
	padding: .25rem !important;
	box-shadow: none !important;
}
.onsl-item-remove:hover {
	color: #EF4343 !important;
	background: none !important;
}

.onsl-list-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #E3E3DD;
	padding-top: 1rem;
	margin-bottom: 1.25rem;
	font-family: "Sora", sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
}
.onsl-list-total {
	color: #186D42;
}

.onsl-add-all-btn {
	width: 100%;
}

/* ---- Search overlay ---- */
.onsl-search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
.onsl-search-overlay-inner {
	background: #fff;
	border-radius: 1rem;
	padding: 1.5rem;
	width: 100%;
	max-width: 480px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}
.onsl-search-overlay-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.onsl-search-overlay-header h4 {
	font-family: "Sora", sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	margin: 0;
	color: #333;
}
.onsl-close-search-btn {
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: #999;
}
.onsl-close-search-btn:hover {
	color: #333;
}
.onsl-search-input {
	width: 100%;
	padding: .75rem 1rem;
	border: 1px solid #E3E3DD;
	border-radius: .5rem;
	font-family: "DM Sans", sans-serif;
	font-size: .9375rem;
	margin-bottom: 1rem;
	box-sizing: border-box;
}
.onsl-search-input:focus {
	outline: none;
	border-color: #186D42;
}
.onsl-search-results {
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.onsl-search-result .onsl-btn {
	padding: .4rem .9rem;
	font-size: .8125rem;
	flex-shrink: 0;
}

/* Brief confirmation flash when an item is added, so the click feels
   acknowledged even though the overlay stays open for adding more. */
.onsl-search-result.onsl-just-added {
	border-color: #186D42;
	background: rgba(24,109,66,.05);
}

@media (max-width: 480px) {
	.onsl-item-name {
		max-width: 140px;
	}
}

/* ---- Global "add to list" picker overlay ---- */
.onsl-picker-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(0,0,0,.45) !important;
	z-index: 100001 !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 1.5rem !important;
	/* Deliberately NOT !important on display — this needs to respect
	   whatever the inline style/JS sets (display:none by default, then
	   toggled to flex on open). Forcing it here would override the
	   hidden state and leave the overlay permanently visible, blocking
	   clicks on everything underneath it. */
}
.onsl-picker-inner {
	background: #fff;
	border-radius: 1rem;
	padding: 1.5rem;
	width: 100%;
	max-width: 400px;
	font-family: "DM Sans", sans-serif;
}
.onsl-picker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.onsl-picker-header h4 {
	font-family: "Sora", sans-serif;
	font-weight: 700;
	font-size: 1.0625rem;
	margin: 0;
	color: #333;
}
.onsl-picker-status {
	font-size: .875rem;
	font-weight: 600;
	margin-bottom: 1rem;
}
.onsl-picker-lists {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-bottom: 1rem;
}
.onsl-picker-lists .onsl-picker-list-btn {
	width: 100%;
	text-align: left;
}
.onsl-picker-new-list {
	display: flex;
	gap: .5rem;
}
.onsl-picker-new-list-name {
	flex: 1;
	min-width: 0;
	padding: .6rem .8rem;
	border: 1px solid #E3E3DD;
	border-radius: .5rem;
	font-family: "DM Sans", sans-serif;
	font-size: .875rem;
}
.onsl-picker-new-list-name:focus {
	outline: none;
	border-color: #186D42;
}