/* MantraMani Kundli - the coffee-cup trigger that slides in from the screen
   edge, and the offer modal it opens.

   Everything is prefixed .mmsl so it cannot collide with the reading widget
   (.mm-) or with the theme's own overlays (.mmeo-, .mmov-). The shop
   navigation sits at z-index 7999 and the Oracle popup at 10050; this sits
   between them, and slidein.js retracts it while either is open.

   The dock and the cup are separate elements on purpose: the dock owns the
   slide-in transform, the cup owns the rocking animation. One element cannot
   hold both, because the second transform would overwrite the first. */

.mmsl-dock,
.mmsl-veil {
	--mmsl-ink: #241c33;
	--mmsl-night: #191223;
	--mmsl-paper: #fffdf9;
	--mmsl-gold: #d4af37;
	--mmsl-gold-dk: #a8841f;
	--mmsl-dim: #6b6b6b;
	--mmsl-line: #ece5d7;
	box-sizing: border-box;
}

.mmsl-dock *,
.mmsl-veil *,
.mmsl-veil *::before,
.mmsl-veil *::after { box-sizing: border-box; }

/* --------------------------------------------------------------- the dock */

.mmsl-dock {
	position: fixed;
	top: 50%;
	left: 8px;
	z-index: 10030;
	line-height: 0;
	/* Parked off the edge; .is-in slides it in. */
	transform: translate(-120%, -50%);
	transition: transform .6s cubic-bezier(.2, .8, .25, 1);
}

.mmsl-dock--right {
	left: auto;
	right: 8px;
	transform: translate(120%, -50%);
}

.mmsl-dock.is-in { transform: translate(0, -50%); }

/* Out of the way while a theme overlay owns the screen. */
.mmsl-dock.is-hidden { transform: translate(-120%, -50%) !important; }
.mmsl-dock--right.is-hidden { transform: translate(120%, -50%) !important; }

.mmsl-tab {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mmsl-tab:focus-visible { outline: 3px solid var(--mmsl-gold); outline-offset: 4px; border-radius: 8px; }

.mmsl-cup {
	display: block;
	width: 190px;
	height: auto;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .28));
	/* Rocks like a cup set down on a table, not like a shaking box. */
	transform-origin: 50% 86%;
	animation: mmsl-wiggle 5s ease-in-out 2s infinite;
}

.mmsl-tab:hover .mmsl-cup,
.mmsl-tab:focus-visible .mmsl-cup {
	animation-play-state: paused;
	transform: scale(1.04);
	transition: transform .18s ease;
}

/* The shake is a short burst inside a mostly idle cycle: 5s round trip, with
   the motion itself packed into the last ~0.65s so each swing is quick rather
   than a slow sway. Widening this window slows the wiggle down; narrowing it
   speeds it up. */
@keyframes mmsl-wiggle {
	0%, 87%, 100% { transform: rotate(0deg); }
	88.5% { transform: rotate(-7deg); }
	90.5% { transform: rotate(6deg); }
	92.5% { transform: rotate(-4.5deg); }
	94.5% { transform: rotate(3deg); }
	96.5% { transform: rotate(-1.8deg); }
	98%   { transform: rotate(0deg); }
}

/* Sits beside the lid rather than in the corner, where the image is only
   steam and the button would look unattached. */
.mmsl-dock-x {
	position: absolute;
	top: 25%;
	right: 2px;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(25, 18, 35, .78);
	color: #fdf6e3;
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.mmsl-dock-x:hover { background: var(--mmsl-night); }
.mmsl-dock-x:focus-visible { outline: 2px solid var(--mmsl-gold); outline-offset: 2px; }

.mmsl-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A phone has no room for it at half height, so it drops to the bottom corner
   and shrinks. It still arrives from the same edge. */
@media (max-width: 600px) {
	.mmsl-dock,
	.mmsl-dock--right {
		top: auto;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		transform: translate(-120%, 0);
	}
	.mmsl-dock--right { transform: translate(120%, 0); }
	.mmsl-dock.is-in { transform: translate(0, 0); }
	.mmsl-dock.is-hidden { transform: translate(-120%, 0) !important; }
	.mmsl-dock--right.is-hidden { transform: translate(120%, 0) !important; }
	.mmsl-cup { width: 132px; }
	.mmsl-dock-x { width: 22px; height: 22px; font-size: 14px; }
}

/* -------------------------------------------------------------- the modal */

.mmsl-veil {
	position: fixed;
	inset: 0;
	z-index: 10040;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(18, 13, 28, .58);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}

.mmsl-veil.is-open { opacity: 1; visibility: visible; }

/* Flex column with only the middle scrolling. On a short screen - a 360x600
   Android, or any phone in landscape - a single scrolling box pushes the
   button below the fold, and a visitor who never scrolls inside a modal never
   sees the one thing it is there for. Head and action block stay put; the
   bullet list is the part that gives way. */
.mmsl-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(460px, 100%);
	max-height: min(90vh, 760px);
	overflow-x: hidden;
	/* Safety net. If the head and the action block alone cannot fit - a very
	   short window, or a visitor with large text - the modal scrolls rather
	   than clipping the button out of existence. */
	overflow-y: auto;
	background: var(--mmsl-paper);
	color: var(--mmsl-ink);
	border-radius: 16px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.55;
	text-align: left;
	transform: translateY(18px) scale(.97);
	transition: transform .32s cubic-bezier(.2, .8, .25, 1);
}

.mmsl-veil.is-open .mmsl-modal { transform: none; }

.mmsl-x {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fdf6e3;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.mmsl-x:hover { background: rgba(255, 255, 255, .3); }
.mmsl-x:focus-visible { outline: 2px solid var(--mmsl-gold); outline-offset: 2px; }

.mmsl-head {
	flex: 0 0 auto;
	padding: 26px 26px 22px;
	background: linear-gradient(160deg, #33274b 0%, var(--mmsl-night) 100%);
	color: #fdf6e3;
}

.mmsl-eyebrow {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(212, 175, 55, .17);
	color: var(--mmsl-gold);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.mmsl-title {
	margin: 0 0 8px;
	font-size: 1.45rem;
	line-height: 1.22;
	font-weight: 700;
	color: #fff;
}

.mmsl-body-text {
	margin: 0;
	font-size: .95rem;
	color: rgba(253, 246, 227, .8);
}

.mmsl-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 20px 26px 4px;
}

.mmsl-act {
	flex: 0 0 auto;
	padding: 14px 26px 22px;
	background: var(--mmsl-paper);
	box-shadow: 0 -12px 18px -14px rgba(0, 0, 0, .35);
}

.mmsl-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mmsl-list li {
	position: relative;
	margin: 0 0 9px;
	padding-left: 26px;
	font-size: .94rem;
}

.mmsl-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .42em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--mmsl-gold-dk);
	border-bottom: 2px solid var(--mmsl-gold-dk);
	transform: rotate(-45deg);
}

.mmsl-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--mmsl-line);
	border-radius: 10px;
	background: #fff;
}

.mmsl-price__amount {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

.mmsl-price__was {
	font-size: 1rem;
	color: var(--mmsl-dim);
	text-decoration-thickness: 1.5px;
}

.mmsl-price__note {
	font-size: .82rem;
	color: var(--mmsl-dim);
}

.mmsl-cta {
	display: block;
	width: 100%;
	padding: 15px 20px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(165deg, var(--mmsl-gold) 0%, var(--mmsl-gold-dk) 100%);
	color: #241c33;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter .18s ease;
}
.mmsl-cta:hover { filter: brightness(1.07); color: #241c33; text-decoration: none; }
.mmsl-cta:focus-visible { outline: 3px solid var(--mmsl-ink); outline-offset: 2px; }

.mmsl-foot {
	margin: 12px 0 0;
	text-align: center;
	font-size: .82rem;
	color: var(--mmsl-dim);
}

.mmsl-later {
	display: inline-block;
	margin-top: 10px;
	background: none;
	border: 0;
	padding: 4px;
	color: var(--mmsl-dim);
	font: inherit;
	font-size: .82rem;
	text-decoration: underline;
	cursor: pointer;
}

/* Short screens: tighten everything so the list still has room to show. */
@media (max-height: 700px) {
	.mmsl-head { padding: 20px 22px 16px; }
	.mmsl-title { font-size: 1.22rem; }
	.mmsl-body { padding: 14px 22px 2px; }
	.mmsl-list li { margin-bottom: 6px; font-size: .9rem; }
	.mmsl-act { padding: 12px 22px 16px; }
	.mmsl-price { margin-bottom: 12px; padding: 9px 12px; }
	.mmsl-price__amount { font-size: 1.3rem; }
	.mmsl-cta { padding: 13px 18px; }
}

/* Phone in landscape. There is no room for the list at all - a 16px sliver of
   it is worse than none - so drop it and keep headline, price and button. */
@media (max-height: 520px) {
	.mmsl-body,
	.mmsl-foot--note { display: none; }
	.mmsl-head { padding: 16px 22px 14px; }
	.mmsl-eyebrow { margin-bottom: 6px; }
	.mmsl-title { font-size: 1.15rem; }
	.mmsl-body-text { font-size: .88rem; }
	.mmsl-act { padding: 12px 22px 14px; }
	.mmsl-price { margin-bottom: 10px; }
	.mmsl-foot { margin-top: 8px; font-size: .78rem; }
	.mmsl-cup { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
	.mmsl-dock,
	.mmsl-veil,
	.mmsl-modal { transition: none; }
	.mmsl-cup { animation: none; }
}

/* ------------------------------------------------- the collapsed banner */
/* Closing the cup no longer takes the offer off the screen for a week: it
   folds down to a slim tab welded to the same edge the cup arrives from, so
   the price stays readable and one click brings the offer back. The tab lives
   INSIDE the dock because the dock owns the slide-in and retract transforms. */

.mmsl-mini {
	display: none;
	margin: 0;
	padding: 16px 11px;
	border: 0;
	/* The tab is rotated 180deg below to get the text running up the edge, and
	   that rotation takes the corners with it - so these are authored MIRRORED.
	   Written this way it renders square against the screen edge and rounded on
	   the side facing the page. */
	border-radius: 12px 0 0 12px;
	background: var(--mmsl-night);
	color: #fdf6e3;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	cursor: pointer;
	box-shadow: 0 0 18px rgba(0, 0, 0, .32);
	-webkit-appearance: none;
	appearance: none;
	/* Reads bottom-to-top up the left edge. */
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.mmsl-mini__price { color: var(--mmsl-gold); }

.mmsl-mini:hover { background: #322745; }
.mmsl-mini:focus-visible { outline: 3px solid var(--mmsl-gold); outline-offset: 3px; }

.mmsl-dock.is-min { left: 0; }
.mmsl-dock--right.is-min { left: auto; right: 0; }
.mmsl-dock--right .mmsl-mini { border-radius: 0 12px 12px 0; }  /* mirrored, see above */
.mmsl-dock.is-min .mmsl-mini { display: block; }
.mmsl-dock.is-min .mmsl-tab,
.mmsl-dock.is-min .mmsl-dock-x { display: none; }

@media (max-width: 600px) {
	/* On a phone the dock already sits in the bottom corner, where a vertical
	   strip would be unreadable, so the tab lies flat instead. */
	.mmsl-mini {
		writing-mode: horizontal-tb;
		transform: none;
		/* not rotated on a phone, so this one is authored the way it renders */
		border-radius: 12px;
		padding: 11px 15px;
	}
	.mmsl-dock.is-min { left: 8px; }
	.mmsl-dock--right.is-min { left: auto; right: 8px; }
	.mmsl-dock--right .mmsl-mini { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.mmsl-mini { box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
}