/* 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); }
}

/* The phone tuck (owner 2026-09-21), driven by .is-tucked from slidein.js. After a few
   seconds the flat banner slides back into the left edge and leaves a 30px handle - the
   banner's own dark body with a gold arrow - square against the screen edge, rounded on
   the page side. Only the banner moves (the dock keeps its slide-in transform). The
   words fade so the handle reads as a tab, not as clipped text. */
.mmsl-mini__peek { display: none; }

@media (max-width: 600px) {
	.mmsl-mini {
		position: relative;
		transition: transform .55s cubic-bezier(.2, .8, .25, 1), border-radius .3s ease;
	}
	.mmsl-mini__label {
		display: inline-block;
		transition: opacity .2s ease .15s;
	}
	.mmsl-mini__peek {
		display: grid;
		place-items: center;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 26px;
		color: var(--mmsl-gold);
		font-size: 22px;
		font-weight: 700;
		line-height: 1;
		opacity: 0;
		transition: opacity .2s ease;
		pointer-events: none;
	}
	/* the dock sits at left:8px, so -100% + 22px leaves 30px of banner on screen */
	.mmsl-dock.is-min.is-tucked .mmsl-mini {
		transform: translateX(calc(22px - 100%));
		border-radius: 0 12px 12px 0;
	}
	.mmsl-dock.is-tucked .mmsl-mini__label { opacity: 0; transition-delay: 0s; }
	.mmsl-dock.is-tucked .mmsl-mini__peek { opacity: 1; transition-delay: .3s; }
	/* mirrored for a right-edge dock */
	.mmsl-dock--right.is-min.is-tucked .mmsl-mini {
		transform: translateX(calc(100% - 22px));
		border-radius: 12px 0 0 12px;
	}
	.mmsl-dock--right .mmsl-mini__peek { right: auto; left: 0; transform: scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) {
	.mmsl-mini,
	.mmsl-mini__label,
	.mmsl-mini__peek { transition: none; }
}

/* ============================================================== the ticket stub
   The modal is a torn-off ticket: the astrologer's photograph on the stub, the
   offer on the counterfoil, punched notches and a perforation down the seam.

   The accent is #c2410c rather than the mock's #e8590c - white on #e8590c is
   3.6:1, and the button label is the one thing in here that has to be readable.

   The modal keeps its own scrolling behaviour; only .mmsl-main scrolls now, so a
   short screen still never pushes the button out of reach.                     */

.mmsl-modal {
	--mmsl-ticket: #c2410c;
	width: min(680px, 100%);
	display: grid;
	grid-template-columns: 40% 60%;
	align-items: stretch;
	overflow: hidden;           /* the notches are punched inside the card */
	border-radius: 18px;
}

.mmsl-main {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
	border-left: 2px dashed rgba(36, 28, 21, .2);   /* the perforation */
}

.mmsl-stub {
	position: relative;
	overflow: hidden;
	min-height: 420px;
	background: linear-gradient(170deg, #e8a35c, #a8551f);   /* shows if the photo is gone */
}

.mmsl-stub__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 28%;
}

.mmsl-stub__ov {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(36, 28, 21, .12) 35%, rgba(36, 28, 21, .78));
}

/* Punched holes, sitting on the seam. They are the colour of the paper, so the
   ticket reads as one sheet with two bites taken out of it. */
.mmsl-stub::before,
.mmsl-stub::after {
	content: '';
	position: absolute;
	right: -12px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mmsl-paper);
	z-index: 3;
}
.mmsl-stub::before { top: 26%; }
.mmsl-stub::after { bottom: 26%; }

.mmsl-stub__label {
	position: absolute;
	left: 10px;
	bottom: 58px;
	z-index: 2;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: #ffe6c9;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.mmsl-stub__code {
	position: absolute;
	left: 12px;
	bottom: 14px;
	z-index: 2;
	width: 74px;
	height: 26px;
	opacity: .85;
	background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px, #fff 5px 6px, transparent 6px 9px);
}

/* ---- the counterfoil ---- */

.mmsl-eyebrow {
	background: var(--mmsl-ticket) !important;
	color: #fff !important;
	border: 0 !important;
	letter-spacing: 1.6px;
}

.mmsl-list li::before { color: var(--mmsl-ticket) !important; }

/* The price lives inside the button now: one thing to look at, one thing to
   press. .mmsl-price__amount is kept as the class, because the edge banner reads
   the figure out of it. */
.mmsl-cta {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 13px 18px !important;
	background: var(--mmsl-ticket) !important;
	color: #fff !important;
	border-radius: 12px !important;
}
.mmsl-cta:hover { background: #9f350a !important; color: #fff !important; filter: none; }

.mmsl-cta__label { font-size: 1rem; font-weight: 800; }

.mmsl-cta .mmsl-price {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.mmsl-cta .mmsl-price__was { font-size: .82rem; color: rgba(255, 255, 255, .75); }
.mmsl-cta .mmsl-price__amount { font-size: 1.15rem; font-weight: 900; color: #fff; }
.mmsl-cta .mmsl-price__note { font-size: .74rem; color: rgba(255, 255, 255, .85); }

/* ---- phones: the stub becomes the header band ---- */
@media (max-width: 640px) {
	.mmsl-modal { grid-template-columns: 1fr; }
	.mmsl-stub { min-height: 168px; }
	.mmsl-stub__img { object-position: 50% 22%; }
	.mmsl-main { border-left: 0; border-top: 2px dashed rgba(36, 28, 21, .2); }
	/* the seam is horizontal now, so the holes move to its ends */
	.mmsl-stub::before,
	.mmsl-stub::after { top: auto; bottom: -12px; }
	.mmsl-stub::before { left: -12px; right: auto; }
	.mmsl-stub::after { right: -12px; }
	.mmsl-stub__label { display: none; }
	.mmsl-stub__code { left: auto; right: 12px; bottom: 16px; }
}

/* A landscape phone has no room for a photo band at all. */
@media (max-height: 520px) and (max-width: 640px) {
	.mmsl-stub { display: none; }
	.mmsl-main { border-top: 0; }
}

/* ---- the counterfoil is one sheet ----------------------------------------
   The old design opened with a dark violet banner, which on a ticket reads as
   two different tickets stapled together. Everything right of the perforation
   is now the same paper, with the photograph carrying all the colour.          */

.mmsl-head {
	background: var(--mmsl-paper) !important;
	color: var(--mmsl-ink) !important;
	padding: 24px 24px 12px !important;
}

.mmsl-title {
	color: var(--mmsl-ink) !important;
	font-size: 1.32rem !important;
}

.mmsl-body-text {
	color: var(--mmsl-dim) !important;
	font-size: .88rem !important;
}

.mmsl-body { padding: 4px 24px 6px !important; }

.mmsl-act {
	padding: 12px 24px 20px !important;
	box-shadow: none !important;
}

.mmsl-list li { font-size: .86rem !important; }

/* The tick is a rotated corner of two borders, not a glyph, so it takes a
   border colour - setting `color` on it does nothing at all. */
.mmsl-list li::before {
	border-left-color: var(--mmsl-ticket) !important;
	border-bottom-color: var(--mmsl-ticket) !important;
}

/* On paper, a translucent white close button disappears. */
.mmsl-x {
	background: rgba(36, 28, 21, .62) !important;
	color: #fff !important;
}
.mmsl-x:hover { background: rgba(36, 28, 21, .8) !important; }

.mmsl-foot { color: var(--mmsl-dim); }
.mmsl-later { color: var(--mmsl-ink); }

/* ---- larger type on the counterfoil --------------------------------------
   At 680px wide the ticket had room to spare and the copy was reading small,
   especially the bullets, which are the part that actually sells the report. */

.mmsl-modal { font-size: 16px; }

.mmsl-eyebrow { font-size: .74rem !important; }
.mmsl-title { font-size: 1.5rem !important; }
.mmsl-body-text { font-size: 1rem !important; line-height: 1.5; }
.mmsl-list li { font-size: .97rem !important; margin-bottom: 11px !important; }
.mmsl-cta__label { font-size: 1.1rem; }
.mmsl-cta .mmsl-price__amount { font-size: 1.3rem; }
.mmsl-cta .mmsl-price__was { font-size: .9rem; }
.mmsl-cta .mmsl-price__note { font-size: .82rem; }
.mmsl-foot { font-size: .88rem !important; }
.mmsl-later { font-size: .92rem; }

/* With bigger text the bullets no longer need to be pushed to the top of a tall
   column - let the block sit under the heading and keep the button close. */
.mmsl-body { flex: 0 1 auto !important; }
.mmsl-act { margin-top: auto; }

@media (max-width: 640px) {
	.mmsl-title { font-size: 1.32rem !important; }
	.mmsl-body-text { font-size: .95rem !important; }
	.mmsl-list li { font-size: .93rem !important; }
}