/*
 * Magic Bloom recipe cooking tools:
 * - Keep Screen Awake toggle
 * - Step-by-step Cooking Mode modal
 */

.wprm-recipe-container .mb-recipe-utility-bar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	margin:2px 0 20px;
	padding:13px 15px;
	border:1px solid rgba(15,44,66,.13);
	border-radius:14px;
	background:#f5faf6;
	box-shadow:0 5px 16px rgba(15,44,66,.05);
}
.wprm-recipe-container .mb-recipe-awake-copy{
	display:grid;
	gap:2px;
	min-width:0;
}
.wprm-recipe-container .mb-recipe-awake-copy strong{
	color:#0f2c42;
	font-size:13px;
	font-weight:900;
	line-height:1.2;
}
.wprm-recipe-container .mb-recipe-awake-copy span{
	color:#6f7b80;
	font-size:9px;
	font-weight:600;
	line-height:1.35;
}
.mb-awake-switch{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	margin:0;
	padding:0;
	border:0;
	background:transparent;
	cursor:pointer;
}
.mb-awake-switch-track{
	position:relative;
	display:block;
	width:48px;
	height:27px;
	border:1px solid rgba(15,44,66,.17);
	border-radius:999px;
	background:#dfe6e7;
	box-shadow:inset 0 1px 2px rgba(15,44,66,.08);
	transition:background .2s ease,border-color .2s ease;
}
.mb-awake-switch-thumb{
	position:absolute;
	top:3px;
	left:3px;
	width:19px;
	height:19px;
	border-radius:50%;
	background:#fff;
	box-shadow:0 2px 6px rgba(15,44,66,.24);
	transition:transform .2s ease;
}
.mb-awake-switch[aria-checked="true"] .mb-awake-switch-track,
.mb-cook-awake-mini[aria-checked="true"] .mb-awake-switch-track{
	border-color:#55bc70;
	background:#74d18c;
}
.mb-awake-switch[aria-checked="true"] .mb-awake-switch-thumb,
.mb-cook-awake-mini[aria-checked="true"] .mb-awake-switch-thumb{
	transform:translateX(21px);
}
.mb-awake-switch.is-unsupported{
	opacity:.45;
}
.mb-awake-switch:focus-visible,
.mb-cook-awake-mini:focus-visible,
.mb-cooking-mode-launch:focus-visible,
.mb-cook-close:focus-visible,
.mb-cook-nav:focus-visible{
	outline:3px solid rgba(116,209,140,.5);
	outline-offset:3px;
}

/* Instructions heading + cooking button */
.wprm-recipe-container .mb-recipe-instructions-heading{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	margin:24px 0 12px;
}
.wprm-recipe-container .mb-recipe-instructions-heading .wprm-recipe-header{
	margin:0!important;
}
.wprm-recipe-container .mb-cooking-mode-launch{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	min-height:36px;
	padding:8px 13px;
	border:0;
	border-radius:999px;
	background:#0f2c42;
	color:#fff;
	font-family:Poppins,Arial,sans-serif;
	font-size:10px;
	font-weight:900;
	line-height:1;
	cursor:pointer;
	box-shadow:0 5px 14px rgba(15,44,66,.14);
	white-space:nowrap;
}
.wprm-recipe-container .mb-cooking-mode-launch:hover{
	background:#f7775e;
	color:#0f2c42;
}
.wprm-recipe-container .mb-cooking-mode-launch svg{
	width:15px;
	height:15px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.8;
	stroke-linecap:round;
	stroke-linejoin:round;
}

/* Full-screen cooking experience */
body.mb-cooking-mode-open{
	overflow:hidden!important;
}
.mb-cook-modal[hidden]{
	display:none!important;
}
.mb-cook-modal{
	position:fixed;
	z-index:2147483000;
	inset:0;
	display:grid;
	place-items:center;
	padding:18px;
	font-family:Poppins,Arial,sans-serif;
}
.mb-cook-modal-backdrop{
	position:absolute;
	inset:0;
	background:rgba(7,20,29,.78);
	backdrop-filter:blur(6px);
}
.mb-cook-dialog{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-rows:auto 5px minmax(0,1fr) auto;
	width:min(760px,100%);
	height:min(760px,calc(100dvh - 36px));
	overflow:hidden;
	border:1px solid rgba(15,44,66,.13);
	border-radius:26px;
	background:#fff;
	color:#25343b;
	box-shadow:0 34px 90px rgba(0,0,0,.32);
}
.mb-cook-dialog-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	padding:20px 22px 17px;
	border-bottom:1px solid rgba(15,44,66,.08);
}
.mb-cook-dialog-title-wrap{
	min-width:0;
}
.mb-cook-eyebrow{
	display:block;
	margin-bottom:3px;
	color:#f06e58;
	font-size:9px;
	font-weight:900;
	letter-spacing:.13em;
	text-transform:uppercase;
}
.mb-cook-dialog h2{
	margin:0!important;
	color:#0f2c42!important;
	font-family:Oswald,"Arial Narrow",sans-serif!important;
	font-size:28px!important;
	font-weight:700!important;
	line-height:1!important;
}
.mb-cook-dialog-actions{
	display:flex;
	align-items:center;
	gap:8px;
}
.mb-cook-awake-mini{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0;
	padding:7px 9px 7px 11px;
	border:1px solid rgba(15,44,66,.12);
	border-radius:999px;
	background:#f3f8f4;
	color:#0f2c42;
	font-size:9px;
	font-weight:900;
	cursor:pointer;
}
.mb-cook-awake-mini .mb-awake-switch-track{
	width:38px;
	height:22px;
}
.mb-cook-awake-mini .mb-awake-switch-thumb{
	top:3px;
	left:3px;
	width:14px;
	height:14px;
}
.mb-cook-awake-mini[aria-checked="true"] .mb-awake-switch-thumb{
	transform:translateX(16px);
}
.mb-cook-close{
	display:grid;
	place-items:center;
	width:38px;
	height:38px;
	margin:0;
	padding:0;
	border:0;
	border-radius:50%;
	background:#0f2c42;
	color:#fff;
	cursor:pointer;
}
.mb-cook-close svg{
	width:18px;
	height:18px;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
}
.mb-cook-progress{
	overflow:hidden;
	background:#e7ecee;
}
.mb-cook-progress span{
	display:block;
	width:0;
	height:100%;
	background:linear-gradient(90deg,#74d18c,#ffd46a);
	transition:width .25s ease;
}
.mb-cook-main{
	overflow:auto;
	padding:28px 30px;
	-webkit-overflow-scrolling:touch;
}
.mb-cook-step-meta{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:18px;
}
.mb-cook-step-count{
	display:inline-flex;
	align-items:center;
	min-height:27px;
	padding:0 10px;
	border-radius:999px;
	background:#d0f1da;
	color:#0f2c42;
	font-size:10px;
	font-weight:900;
}
.mb-cook-group{
	color:#f06e58;
	font-size:10px;
	font-weight:900;
	letter-spacing:.08em;
	text-transform:uppercase;
}
.mb-cook-step-content{
	color:#25343b;
	font-size:20px;
	line-height:1.65;
}
.mb-cook-step-clone{
	margin:0!important;
	padding:0!important;
	list-style:none!important;
}
.mb-cook-step-clone::before,
.mb-cook-step-clone::marker{
	display:none!important;
	content:none!important;
}
.mb-cook-step-clone .wprm-recipe-instruction-text{
	font-size:inherit!important;
	line-height:inherit!important;
}
.mb-cook-step-clone .wprm-recipe-instruction-media{
	margin-top:20px!important;
}
.mb-cook-step-clone img{
	max-width:100%;
	height:auto;
	border-radius:16px;
}
.mb-cook-footer{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	padding:15px 20px 20px;
	border-top:1px solid rgba(15,44,66,.08);
	background:#fafbf9;
}
.mb-cook-nav{
	min-height:48px;
	margin:0;
	padding:10px 16px;
	border:1px solid rgba(15,44,66,.14);
	border-radius:14px;
	background:#fff;
	color:#0f2c42;
	font-family:Poppins,Arial,sans-serif;
	font-size:12px;
	font-weight:900;
	cursor:pointer;
}
.mb-cook-next{
	border-color:#0f2c42;
	background:#0f2c42;
	color:#fff;
}
.mb-cook-nav:disabled{
	opacity:.35;
	cursor:not-allowed;
}

/* Cooking mode follows site dark mode. */
html[data-mb-theme="dark"] .wprm-recipe-container .mb-recipe-utility-bar{
	background:#172a36;
	border-color:rgba(255,255,255,.12);
}
html[data-mb-theme="dark"] .wprm-recipe-container .mb-recipe-awake-copy strong{
	color:#fff;
}
html[data-mb-theme="dark"] .wprm-recipe-container .mb-recipe-awake-copy span{
	color:#aab8c2;
}
html[data-mb-theme="dark"] .mb-awake-switch-track{
	background:#30414c;
	border-color:rgba(255,255,255,.14);
}
html[data-mb-theme="dark"] .mb-cook-dialog{
	background:#13222d;
	color:#edf3f6;
	border-color:rgba(255,255,255,.12);
}
html[data-mb-theme="dark"] .mb-cook-dialog-header,
html[data-mb-theme="dark"] .mb-cook-footer{
	border-color:rgba(255,255,255,.1);
}
html[data-mb-theme="dark"] .mb-cook-dialog h2{
	color:#fff!important;
}
html[data-mb-theme="dark"] .mb-cook-awake-mini{
	background:#1a2d39;
	color:#fff;
	border-color:rgba(255,255,255,.12);
}
html[data-mb-theme="dark"] .mb-cook-progress{
	background:#283b47;
}
html[data-mb-theme="dark"] .mb-cook-main,
html[data-mb-theme="dark"] .mb-cook-step-content{
	color:#edf3f6;
}
html[data-mb-theme="dark"] .mb-cook-footer{
	background:#101d27;
}
html[data-mb-theme="dark"] .mb-cook-nav{
	background:#1a2d39;
	color:#fff;
	border-color:rgba(255,255,255,.14);
}
html[data-mb-theme="dark"] .mb-cook-next{
	background:#74d18c;
	border-color:#74d18c;
	color:#0f2c42;
}

@media(max-width:767px){
	.wprm-recipe-container .mb-recipe-utility-bar{
		gap:10px;
		padding:11px 12px;
	}
	.wprm-recipe-container .mb-recipe-awake-copy strong{
		font-size:12px;
	}
	.wprm-recipe-container .mb-recipe-awake-copy span{
		font-size:8px;
	}
	.wprm-recipe-container .mb-recipe-instructions-heading{
		align-items:center;
		gap:8px;
	}
	.wprm-recipe-container .mb-cooking-mode-launch{
		min-height:34px;
		padding:7px 10px;
		font-size:9px;
	}
	.mb-cook-modal{
		padding:0;
	}
	.mb-cook-dialog{
		width:100%;
		height:100dvh;
		border:0;
		border-radius:0;
	}
	.mb-cook-dialog-header{
		padding:14px 14px 12px;
	}
	.mb-cook-dialog h2{
		max-width:190px;
		font-size:23px!important;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.mb-cook-awake-label{
		display:none;
	}
	.mb-cook-awake-mini{
		padding:7px;
	}
	.mb-cook-main{
		padding:24px 18px;
	}
	.mb-cook-step-content{
		font-size:18px;
		line-height:1.62;
	}
	.mb-cook-footer{
		padding:12px 14px max(14px,env(safe-area-inset-bottom));
	}
	.mb-cook-nav{
		min-height:50px;
	}
}

@media(max-width:390px){
	.wprm-recipe-container .mb-cooking-mode-launch span{
		display:none;
	}
	.wprm-recipe-container .mb-cooking-mode-launch{
		width:36px;
		padding:0;
	}
}

@media(prefers-reduced-motion:reduce){
	.mb-awake-switch-thumb,
	.mb-awake-switch-track,
	.mb-cook-progress span{
		transition:none!important;
	}
}