/* Moletai Service Discounts — checkout UX */

:root {
	--msd-brand: #b7935a;
	--msd-line: #e3ddd2;
	--msd-ink: #3a3a3a;
	--msd-muted: #8a8378;
	--msd-ok: #2e7d32;
}

/* --- Step 1: services only ------------------------------------------- */

.mphb_sc_checkout-form.msd-step1 .msd-step2-only {
	display: none;
}

.msd-continue-wrap {
	margin: 1.4em 0 .4em;
}
button.msd-continue,
button.msd-continue:hover,
button.msd-continue:focus {
	min-width: 14em;
	background: var(--msd-brand);
	border: 1px solid var(--msd-brand);
	color: #fff;
	padding: .8em 2em;
	border-radius: 8px;
	font-weight: 600;
	letter-spacing: .02em;
	cursor: pointer;
	transition: filter .15s ease;
}
button.msd-continue:hover {
	filter: brightness(1.08);
}

/* --- Tier ladder, collapsed behind a link ---------------------------- */

.msd-note-wrap {
	margin: .2em 0 1em;
}
.msd-note-toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font-size: .9em;
	color: var(--msd-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.msd-note-toggle::before {
	content: "＋";
	margin-right: .4em;
	text-decoration: none;
	display: inline-block;
}
.msd-note-toggle.msd-open::before {
	content: "－";
}
.msd-note {
	font-size: .9em;
	line-height: 1.8;
	background: #faf8f4;
	border: 1px solid var(--msd-line);
	padding: .7em 1em;
	margin: .6em 0 0;
	border-radius: 8px;
}
.msd-note-label {
	font-weight: 600;
	margin-right: .35em;
}
.msd-note .msd-tier {
	display: inline-block;
	white-space: nowrap;
}
.msd-note .msd-tier b {
	display: inline-block;
	min-width: 1.4em;
	text-align: center;
	background: var(--msd-brand);
	color: #fff;
	border-radius: 50%;
	line-height: 1.4em;
	margin-right: .25em;
	font-size: .85em;
}
.msd-note .msd-sep {
	color: var(--msd-brand);
	margin: 0 .45em;
}

/* --- Service cards ---------------------------------------------------- */

ul.msd-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7em;
	grid-template-columns: repeat(auto-fit, minmax(19em, 1fr));
}
ul.msd-list > li.msd-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .8em;
	margin: 0;
	padding: .9em 1em;
	border: 1px solid var(--msd-line);
	border-radius: 10px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
ul.msd-list > li.msd-card:hover {
	border-color: var(--msd-brand);
}
ul.msd-list > li.msd-card.msd-selected {
	border-color: var(--msd-brand);
	background: #fdfaf5;
	box-shadow: inset 0 0 0 1px var(--msd-brand);
}
ul.msd-list .mphb-checkbox-label {
	display: flex;
	align-items: center;
	gap: .6em;
	flex: 1 1 100%;
	margin: 0;
	cursor: pointer;
	font-weight: 600;
	color: var(--msd-ink);
}
ul.msd-list .mphb-checkbox-label em {
	font-style: normal;
	font-weight: 500;
	color: var(--msd-muted);
	margin-left: auto;
	white-space: nowrap;
}

/* The theme strips the native checkbox (appearance:none) and leaves :checked
   unstyled, so a ticked service looked identical to an unticked one. */
ul.msd-list input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
ul.msd-list input[type="checkbox"]:checked {
	background-color: var(--msd-brand);
	border-color: var(--msd-brand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

/* Per-service discount tier, shown once the service is picked. */
.msd-badge {
	display: none;
}
.msd-badge.msd-badge-on {
	display: inline-block;
	flex: 0 0 auto;
	background: var(--msd-ok);
	color: #fff;
	font-size: .78em;
	font-weight: 700;
	line-height: 1;
	padding: .35em .55em;
	border-radius: 999px;
	white-space: nowrap;
}

/* --- Priced options --------------------------------------------------- */

.msd-option-label {
	display: flex;
	align-items: center;
	gap: .5em;
	flex: 1 1 100%;
	margin: 0;
	font-size: .88em;
	color: var(--msd-muted);
}
select.msd-option {
	flex: 1 1 auto;
	margin: 0;
	padding: .35em 1.8em .35em .6em;
	font-size: .95em;
	height: auto;
	width: auto;
	min-width: 0;
	border-radius: 6px;
}

/* --- Summary ---------------------------------------------------------- */

.msd-summary {
	margin: 1em 0 0;
	font-size: .95em;
}
.msd-summary.msd-empty {
	color: var(--msd-muted);
	font-style: italic;
}
.msd-summary.msd-active {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1.6em;
	padding: .8em 1.1em;
	background: #f1f7f1;
	border: 1px solid #cfe3cf;
	border-radius: 8px;
	font-style: normal;
	transition: background .5s ease;
}
.msd-summary .msd-disc b {
	color: var(--msd-ok);
}
.msd-summary.msd-flash {
	background: #dbf0db;
}
.msd-computing {
	color: var(--msd-muted);
	font-style: italic;
}