/*** ===================================
     MiMi — Floating buy bar (single course page)

     Lives next to buy-bar.php in
     mifam-dashboard/includes/tutor/buy-bar/ and is enqueued by it.
     Do NOT paste into Additional CSS — the version string is this
     file's mtime, so saving it here busts WP Rocket on its own.

     ⚠ buy-bar.php only runs if it is in the plugin's include list.
     =================================== ***/

/* The wrapper only positions — it paints nothing. The visible card is
   .mimi-buybar-inner, so the bar floats as an island clear of the
   screen edges rather than sitting flush against them.
   pointer-events:none matters: the wrapper spans the full width, and
   without it the transparent gutters either side of the island would
   silently swallow clicks on the page behind them. */
.mimi-buybar {
	position: fixed;
	left: 16px;
	right: 16px;
	/* clears the iPhone home indicator */
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	/* The theme's #scroll_to_top sits at 110000, and two third-party
	   widgets sit at 2000000000. Slot between them: above the theme's
	   own furniture, below anything that expects to own the screen. */
	z-index: 120000;
	pointer-events: none;
}

/* Hidden state. NOT display:none / [hidden] — that cannot transition,
   so the bar would pop in and out. It parks below the fold instead and
   slides up when .is-visible is added.
   visibility is transitioned with a delay equal to the slide, so it
   flips to hidden only AFTER the bar has left the screen: that keeps
   the button out of the tab order and off the accessibility tree while
   still letting the slide-down play out. */
.mimi-buybar {
	transform: translateY(calc(100% + 24px));
	opacity: 0;
	visibility: hidden;
	transition:
		transform .3s cubic-bezier(.22, .61, .36, 1),
		opacity .22s ease,
		visibility 0s linear .3s;
}

.mimi-buybar.is-visible {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition:
		transform .3s cubic-bezier(.22, .61, .36, 1),
		opacity .22s ease,
		visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.mimi-buybar,
	.mimi-buybar.is-visible {
		transition: opacity .15s ease, visibility 0s;
		transform: none;
	}

	.mimi-buybar:not(.is-visible) {
		transition: opacity .15s ease, visibility 0s linear .15s;
	}
}

.mimi-buybar-inner {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 860px;
	margin: 0 auto;
	padding: 10px 12px 10px 14px;
	background: #ffffff;
	border: 1px solid #f6eaee;
	border-radius: 18px;
	/* Two layers — a wide ambient shadow to lift it off the page and a
	   tighter one for contact. A single flat shadow reads as a smudge
	   under something this small. */
	box-shadow:
		0 10px 30px rgba(75, 67, 66, 0.16),
		0 2px 8px rgba(75, 67, 66, 0.08);
}

.mimi-buybar-thumb {
	flex: 0 0 auto;
	display: block;
	width: 120px;
	height: 70px;
	border-radius: 8px;
	overflow: hidden;
	background: #fbf5f7;
}

.mimi-buybar-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* min-width:0 lets a long course title ellipsis instead of shoving
   the price and button off the end of the bar. */
.mimi-buybar-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mimi-buybar-title {
	font-family: 'Fredoka One', cursive;
	font-weight: 100;
	font-size: 16px;
	line-height: 1.25;
	color: #4b4342;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mimi-buybar-sub {
	font-size: 12.5px;
	line-height: 1.3;
	color: #6f6462;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mimi-buybar-price {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 1px;
	color: #4b4342;
}

.mimi-buybar-amount {
	font-family: 'Fredoka One', cursive;
	font-weight: 100;
	font-size: 20px;
	line-height: 1;
}

.mimi-buybar-period {
	font-size: 12px;
	color: #6f6462;
}

/* In enroll mode the CTA is a <button> inside a real POST form, so the
   form becomes the flex item and needs the button's sizing rules. */
.mimi-buybar-enrol {
	flex: 0 0 auto;
	display: flex;
	margin: 0;
	padding: 0;
}

.mimi-buybar-btn {
	flex: 0 0 auto;
	display: inline-block;
	/* resets for the <button> variant */
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	padding: 11px 26px;
	border-radius: 999px;
	background: linear-gradient(90deg, #ff91a4 0%, #ffa9b8 100%);
	color: #ffffff !important;
	font-family: 'Fredoka One', cursive;
	font-weight: 100;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none !important;
	box-shadow: 0 3px 10px rgba(255, 145, 164, 0.35);
	transition: transform .15s ease, box-shadow .15s ease;
}

/* Desktop shows the price in its own column, so the copy inside the
   button is redundant here. It takes over on phones. */
.mimi-buybar-btn-price {
	display: none;
}

.mimi-buybar-btn:hover,
.mimi-buybar-btn:focus {
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(255, 145, 164, 0.45);
}

/* --- Wide screens: sit over the content column only -------- */
/* Centred on the viewport, the island runs under the sidebar and
   covers the Suggested Courses list. From Tutor's xl breakpoint the
   sidebar is a column, so the island is pinned to the main column
   instead and the sidebar stays clear.
   The two custom properties are measured and set by the script in
   buy-bar.php — .tutor-container steps through breakpoint widths
   (540/720/960/1140/1320), so any hardcoded number here would be
   right at one size and wrong at the next. */
@media only screen and (min-width: 1200px) {
	.mimi-buybar {
		left: var(--mimi-buybar-left, 16px);
		right: auto;
		width: var(--mimi-buybar-width, auto);
	}

	.mimi-buybar-inner {
		max-width: none;
		margin: 0;
	}
}

/* The theme's scroll-to-top button lives bottom-right. It only
   collides once the island is wide enough to reach it — on xl and up
   the island is confined to the content column and the button sits
   clear in the sidebar's gutter, so leave it where it is. */
@media only screen and (max-width: 1199px) {
	/* Island is ~90px tall now the thumbnail is 70px, plus its 18px
	   offset — the button has to clear ~108px. */
	body.mimi-buybar-on #scroll_to_top {
		bottom: 128px;
	}
}

@media only screen and (max-width: 767px) {
	.mimi-buybar {
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	/* On a phone the island collapses to the button and nothing else.
	   A thumbnail, title, subtitle and price squeezed onto a 375px row
	   leaves the button too small to be the obvious thing to tap — and
	   the button is the entire point of the bar. The course name is
	   already on screen behind it, so nothing is actually lost. */
	.mimi-buybar-inner {
		padding: 10px;
		border-radius: 18px;
	}

	.mimi-buybar-thumb,
	.mimi-buybar-info,
	.mimi-buybar-price {
		display: none;
	}

	/* The form is the flex item here, so it has to stretch and let the
	   button fill it — otherwise the enrol CTA stays button-width
	   while the buy CTA goes full width. */
	.mimi-buybar-enrol {
		flex: 1 1 auto;
	}

	.mimi-buybar-enrol .mimi-buybar-btn {
		width: 100%;
	}

	.mimi-buybar-btn {
		flex: 1 1 auto;
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 8px;
		padding: 15px 20px;
		font-size: 16px;
	}

	.mimi-buybar-btn-price {
		display: inline;
		font-size: 16px;
	}

	/* No thumbnail down here, so the island is back to button height. */
	body.mimi-buybar-on #scroll_to_top {
		bottom: 96px;
	}
}